react如何对传进来的jsx添加className

Question

代码地址：
https://codesandbox.io/s/blaz...

如何在Checkbox组件内部，对传进来的CheckedIcon的div添加一个class呢？

Answer 1

可以使用React.cloneElement

例如:

React.isValidElement(checkedIcon) && React.cloneElement(checkedIcon, {className: 'xxx'})

Answer 2

那你的CheckedIcon就需要是一个组件，而不是一个jsx片段

const Checkbox = props => {
  const { Checkedicon } = props;
  return (
    <div>
      <Checkedicon className="test"/>
      <span>Checkbox</span>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <Checkbox Checkedicon={props => <div {...props}>icon</div>} />
    </div>
  );
}

但是这么写的话不如直接在jsx片段上加class

<Checkbox Checkedicon={<div className="test">icon</div>} />