如何将道具传递给{this.props.children}

如何将道具传递给{this.props.children}

用新道具克隆Children

您可以使用React.Children遍历子级，然后使用React.cloneElement使用新的道具（浅合并）克隆每个元素，例如：

import React, { Children, isValidElement, cloneElement } from 'react';const Child = ({ doSomething, value }) => (  <div onClick={() => doSomething(value)}>Click Me</div>);function Parent({ children }) {  function doSomething(value) {    console.log('doSomething called by child with value:', value);  }  render() {    const childrenWithProps = Children.map(children, child => {      // Checking isValidElement is the safe way and avoids a TS error too.      if (isValidElement(child)) {        return cloneElement(child, { doSomething })      }      return child;    });    return <div>{childrenWithProps}</div>  }};ReactDOM.render(  <Parent>    <Child value="1" />    <Child value="2" />  </Parent>,  document.getElementById('container'));

小提琴：https :
//jsfiddle.net/2q294y43/2/

称呼children为功能

您也可以将道具传递给带有渲染道具的children。在这种方法中，子代（可以是

children

或任何其他prop名称）是一个函数，可以接受您要传递的任何参数并返回子代：

const Child = ({ doSomething, value }) => (  <div onClick={() =>  doSomething(value)}>Click Me</div>);function Parent({ children }) {  function doSomething(value) {    console.log('doSomething called by child with value:', value);  }  render() {    // Note that children is called as a function and we can pass args to it    return <div>{children(doSomething)}</div>  }};ReactDOM.render(  <Parent>    {doSomething => (      <React.Fragment>        <Child doSomething={doSomething} value="1" />        <Child doSomething={doSomething} value="2" />      </React.Fragment>    )}  </Parent>,  document.getElementById('container'));

如果您愿意，也可以代替

<React.Fragment>

或简单地

<>

返回一个数组。

小提琴：https :
//jsfiddle.net/ferahl/y5pcua68/7/