Добавить дополнительные реквизиты в переменную 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" перед ее использованием в заголовке?

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 компоненту LeftIcon перед его использованием внутри ScreenHeader:

// 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>