Javascript 将道具添加到作为道具传递的React组件？

如何为作为道具传入的JSX组件设置道具

摘自显示了他们如何按照

功能拆分窗格（道具）{
返回(
{props.left}
{props.right}
);
}
函数App（）{
返回(
);
}

---

但是，我想修改传入的道具。在React Native上下文中，我希望向作为道具传入的组件添加其他样式。

如果使用样式化组件，可以执行以下操作：

import styled from 'styled-components';

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

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

从“样式化组件”导入样式化；
const StyledPropComponent=styled.div.attrs（props=>({
建议1:。。。，
建议二：。。。
...
}))`
样式1:。。。；
样式2:。。。；
`;
...
基本上，您需要将函数作为道具而不是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;
}

//App.js
从“React”导入React；
导入“/App.css”；
从“/SplitPane”导入SplitPane；
从“/Contacts”导入联系人；
从“/Chat”导入聊天；
函数App（）{
constmodifiedcontact=（style）=>；
常量ModifiedChat=（样式）=>；
返回(
);
}
导出默认应用程序；
//Chat.js
从“React”导入React；
const Chat=（道具）=>{
返回(
嗨，即时聊天
)
}
导出默认聊天；
//Contacts.js
从“React”导入React；
常量联系人=（道具）=>{
返回(
Hi Im联系人
)
}
导出默认联系人；
//SplitPane.js
从“React”导入React；
常量拆分窗格=（道具）=>{
const contactsStyle=“新建类”；
const chatStyle=“聊天风格”；
返回(
{props.left（contactsStyle）}
{props.right（聊天风格）}
);
}
导出默认拆分窗格；
//App.css
.聊天风格{
颜色：rgb（10,10,10）；
背景色：rgb（207,27,27）；
文本对齐：居中；
}
.新班级{
颜色：#fff；
背景色：#888；
文本对齐：居中；
}
既然我不认为你指的是像
left={}
这样简单的事情，你能澄清一下你想要做什么吗？也许是您代码的一个代码示例？我想这就是您要寻找的：我认为您的示例有一个错误；传递一个
style
prop，然后将其指定为类名，此时style应该是一个对象……它没有任何错误。style是JSX prop，而不是属性，因此您可以将其重命名为您喜欢的任何名称。某些验证组件的测试工具确实存在问题，由于
style
是一个预定义的道具，具有已知的数据格式，因此命名并不重要，我不得不反对。如果你有任何官方文件来支持你的想法会更好。不管怎样，我测试了代码，它确实工作得很好。听起来似乎有道理，但这意味着开发人员需要知道需要为他设置样式和其他道具。如果道具有一个“splat”操作员就好了。
//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;
}