React cloneElement не работает для функционального компонента

Question

Я хотел бы добавить некоторые реквизиты в свой компонент, используя {React.cloneElement(<MyComponent />, { onClick: () => console.log('click'), style: {background: 'red'} })}

Полный код:

const MyComponent = () => {
  return (
    <div>
      foooo
    </div>
  );
};

....
return React.cloneElement(<MyComponent />, { onClick: () => console.log('click'), style: {background: 'red'} })

Но props не передаются в мой компонент.

Когда я использую:

return React.cloneElement(<div>foooo</div>, { onClick: () => console.log('click'), style: {background: 'red'} })

Реквизит работает. Почему? Я не понимаю, почему.

Answer 1

Зачем вам использовать cloneElement, когда вы получили JSX (можно сделать вывод из синтаксиса MyComponents).

Вместо этого выполните:

<MyComponent
  onClick={() => console.log("click")}
  style={{ background: "red" }}
/>

И исправьте свой компонент:

const MyComponent = ({ onClick }) => {
  return <div onClick={onClick}>foooo</div>;
}

JSX является синтаксисом сахара для createElement / cloneElement.

React.cloneElement(
  element,
  [props],
  [...children]
)

React.cloneElement () почти эквивалентен:

<element.type {...element.props} {...props}>{children}</element.type>

Поэтому правильный синтаксис:

const onClick = () => console.log('click');
const style = {background: 'red'};

// Exatcly the same effect as <MyComponent .../> above
React.cloneElement(<MyComponent/>, {onClick, style}, null);