将props添加到作为prop传递的React组件？

Question

如何将属性设置为作为prop传递的JSX组件？

这段文字摘自https://reactjs.org/docs/composition-vs-inheritance.html，展示了如何按照https://dev59.com/zVkS5IYBdhLWcg3wlnvg#63261751所述将组件作为prop传递的方法。

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } 
    />
  );
}

然而，我想修改传入的属性。在React-Native的上下文中，我想要给作为属性传入的组件添加额外的样式。

- Archimedes Trajano

---

由于我认为你的意思不是像 left={<Contacts myProp={someValue} />} 这样简单，你能否澄清一下你想要做什么？也许提供一段你的代码示例会更好理解。 - Drew Reese

我认为这就是你要找的内容：https://dev59.com/BVwY5IYBdhLWcg3wpJP_ - theekshanawj

Answer 1

基本上，你需要将一个函数作为props传递，而不是JSX。以下是一个示例代码：

//App.js
import React from "react";
import "./App.css";
import SplitPane from "./SplitPane";
import Contacts from "./Contacts";
import Chat from "./Chat";

function App() {
  const ModifiedContact = (style) => <Contacts style={style} />;
  const ModifiedChat = (style) => <Chat style={style} />;

  return (
    <div>
      <SplitPane left={ModifiedContact} right={ModifiedChat} />
    </div>
  );
}

export default App;

//Chat.js
import React from "react";

const Chat =(props)=> {
  return (
    <div className={props.style}>
      Hi Im chat
    </div>
  )
}

export default Chat;

//Contacts.js
import React from "react";

const Contacts =(props)=> {
  return (
    <div className={props.style}>
      Hi Im contacts
    </div>
  )
}

export default Contacts;

//SplitPane.js
import React from "react";

const SplitPane = (props)=> {
  const contactsStyle = "new-Class";
  const chatStyle = "chat-Style";
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left(contactsStyle)}
      </div>
      <div className="SplitPane-right" >
        {props.right(chatStyle)}
      </div>
    </div>
  );
}

export default SplitPane;

//App.css
.chat-Style {
  color: rgb(10, 10, 10);
  background-color: rgb(207, 27, 27);
  text-align: center;
}

.new-Class {
  color: #fff;
  background-color: #888;
  text-align: center;
}

- Subha

---

我认为你的示例有错误；你传递了一个 style 属性，然后将其分配为类名，而实际上 style 应该是一个对象... - Michael Rovinsky

它没有任何错误，样式是JSX属性而不是属性，因此您可以将其重命名为任何您喜欢的名称。 - Subha

确实，对于一些验证组件的测试工具来说，这可能是一个问题，因为style是一个预定义的属性，具有已知的数据格式，因此命名确实很重要。 - Michael Rovinsky

抱歉，我不同意。如果您有任何官方文档支持您的想法会更好。无论如何，我测试了代码，它确实运行良好。 - Subha

听起来很合理，但这意味着开发人员需要知道必须为他设置样式和其他道具。如果有道具的“splat”运算符就好了。 - Archimedes Trajano

Answer 2

如果您使用 Styled Components，您可以执行以下操作：

import styled from 'styled-components';

const StyledPropComponent = styled.div.attrs(props => ({
  prop1: ...,
  prop2: ...
  ...
}))`
  style1: ...;
  style2: ...;
`;

...
<ParentComponent left={<StyledPropComponent />}
...

- Michael Rovinsky