向 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) => (

  <div className="LeftIcon" onClick={() => {}} {...props}>

    <p>I am a left icon!</p>

    <p>Additional props: {JSON.stringify(props)}</p>

  </div>

);

const ScreenHeader = ({ leftComponent = null }) => {

  const CustomLeftComponent = leftComponent ? leftComponent : null;

  const greenComponent = CustomLeftComponent 

    ? <CustomLeftComponent style={{ color: "green" }} /> 

    : null;

  return (

    <div>

      <p>I am a screen header!</p>

      {greenComponent}

    </div>

  );

};

function App() {

  return (

    <div className="App">

      <ScreenHeader leftComponent={LeftIcon} />

      <hr />

      <ScreenHeader />

    </div>  

  );

}

ReactDOM.render(

  <App />,

  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) => (

  <div className="LeftIcon" onClick={() => {}} {...props}>

    <p>I am a left icon!</p>

    <p>Additional props: {JSON.stringify(props)}</p>

  </div>

);

const ScreenHeader = ({ leftComponent = null }) => {

  return (

    <div>

      <p>I am a screen header!</p>

      {leftComponent}

    </div>

  );

};

function App() {

  return (

    <div className="App">

      <ScreenHeader leftComponent={<LeftIcon style={{ color: "green" }} />} />

      <hr />

      <ScreenHeader />

    </div>  

  );

}

ReactDOM.render(

  <App />,

  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> = ({

  leftIcon = <></>,

}) => {

return (

    <View>

    <Header 

      leftComponent={React.cloneElement(leftIcon, {className: classes.myClass})}

    />

  </View>

)};