react children技巧总结

发布时间：2020-12-15 20:40:06 所属栏目：百科来源：网络整理

导读：在使用该技巧时，建议先看一下相关的知识，点我查看 ? 假如使用该属性时，想把父组件的所有属性及部分方法传递给子组件，该怎么办呢？看代码 const Child = ({ doSomething,value }) = ( div onClick={() = doSomething(value)}Click Me/div );class Parent

在使用该技巧时，建议先看一下相关的知识，点我查看

假如使用该属性时，想把父组件的所有属性及部分方法传递给子组件，该怎么办呢？看代码

const Child = ({ doSomething,value }) => (
  <div onClick={() => doSomething(value)}>Click Me</div>
);

class Parent extends React.PureComponent {
  doSomething = (value) => {
    console.log(‘doSomething called by child with value:‘,value);
  }

  render() {
    const { children } = this.props.children;

 const childrenWithProps = React.Children.map(children,child => React.cloneElement(child,{ doSomething: this.doSomething }) ); return <div>{childrenWithProps}</div>
  }
};

ReactDOM.render(
  <Parent>
    <Child value="1" />
    <Child value="2" />
  </Parent>,document.getElementById(‘container‘)
);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!