码迷,mamicode.com
首页 > 其他好文 > 详细

react children技巧总结

时间:2018-11-17 13:09:21      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:bsp   parent   www.   extend   ops   OLE   call   some   https   

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

 

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

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‘)
);

react children技巧总结

标签:bsp   parent   www.   extend   ops   OLE   call   some   https   

原文地址:https://www.cnblogs.com/94pm/p/9973277.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!