Question

如何为作为 prop 传入的 JSX 组件设置 props？

取自 https://reactjs.org/docs/composition-vs-inheritance.html 展示了他们如何按照 https://stackoverflow.com/a/63261751/242042

将组件作为 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 />
      } 
    />
  );
}

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

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;
}

Answer 2

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

import styled from 'styled-components';

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

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

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

2 个答案: