向 JSX Element 变量添加额外的道具

Question

如何向作为道具传递的 JSX.Element 变量添加其他道具？

首先我像这样创建变量

const leftIcon = <SmallIcon icon="note" color={colors.red} />

然后它被传递给我的函数组件并像

const ScreenHeader: React.FunctionComponent<ScreenHeaderProps> = ({

  leftIcon = <></>,

}) => {

return (

    <View>

    <Header 

      leftComponent={leftIcon}

    />

  </View>

)};

如何在“leftIcon”变量中添加额外的样式道具，然后再将其用于 Header？

Answer 1

如果您以React现在的方式使用组件初始化变量（const leftIcon = <SmallIcon />），那么您将无法向props其中传递附加值。这是一个可能的解决方案：// make `LeftIcon` into a function so that you// can use it in the following way: `<LeftIcon />`const LeftIcon = (props) => (&nbsp; <div className="LeftIcon" onClick={() => {}} {...props}>&nbsp; &nbsp; <p>I am a left icon!</p>&nbsp; &nbsp; <p>Additional props: {JSON.stringify(props)}</p>&nbsp; </div>);const ScreenHeader = ({ leftComponent = null }) => {&nbsp; const CustomLeftComponent = leftComponent ? leftComponent : null;&nbsp; const greenComponent = CustomLeftComponent&nbsp;&nbsp; &nbsp; ? <CustomLeftComponent style={{ color: "green" }} />&nbsp;&nbsp; &nbsp; : null;&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <p>I am a screen header!</p>&nbsp; &nbsp; &nbsp; {greenComponent}&nbsp; &nbsp; </div>&nbsp; );};function App() {&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <ScreenHeader leftComponent={LeftIcon} />&nbsp; &nbsp; &nbsp; <hr />&nbsp; &nbsp; &nbsp; <ScreenHeader />&nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; );}ReactDOM.render(&nbsp; <App />,&nbsp; document.getElementById("app"))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="app"></div>或者，您可以在内部使用之前将附加信息传递props给组件：LeftIconScreenHeader// make `LeftIcon` into a function so that you// can use it in the following way: `<LeftIcon />`const LeftIcon = (props) => (&nbsp; <div className="LeftIcon" onClick={() => {}} {...props}>&nbsp; &nbsp; <p>I am a left icon!</p>&nbsp; &nbsp; <p>Additional props: {JSON.stringify(props)}</p>&nbsp; </div>);const ScreenHeader = ({ leftComponent = null }) => {&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <p>I am a screen header!</p>&nbsp; &nbsp; &nbsp; {leftComponent}&nbsp; &nbsp; </div>&nbsp; );};function App() {&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <ScreenHeader leftComponent={<LeftIcon style={{ color: "green" }} />} />&nbsp; &nbsp; &nbsp; <hr />&nbsp; &nbsp; &nbsp; <ScreenHeader />&nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; );}ReactDOM.render(&nbsp; <App />,&nbsp; document.getElementById("app"))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="app"></div>

Answer 2

您可以使用React.cloneElement添加额外的道具const ScreenHeader: React.FunctionComponent<ScreenHeaderProps> = ({&nbsp; leftIcon = <></>,}) => {return (&nbsp; &nbsp; <View>&nbsp; &nbsp; <Header&nbsp;&nbsp; &nbsp; &nbsp; leftComponent={React.cloneElement(leftIcon, {className: classes.myClass})}&nbsp; &nbsp; />&nbsp; </View>)};