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

javascript reactjs react-jsx

2022-08-29 22:03:29

我试图找到正确的方法来定义一些可以通用方式使用的组件：

<Parent>
  <Child value="1">
  <Child value="2">
</Parent>

当然，父组件和子组件之间的渲染有一个逻辑，您可以想象并作为此逻辑的示例。<select><option>

出于以下问题的目的，这是一个虚拟实现：

var Parent = React.createClass({
  doSomething: function(value) {
  },
  render: function() {
    return (<div>{this.props.children}</div>);
  }
});

var Child = React.createClass({
  onClick: function() {
    this.props.doSomething(this.props.value); // doSomething is undefined
  },
  render: function() {
    return (<div onClick={this.onClick}></div>);
  }
});

问题是，每当您使用包装器组件时，如何将某些属性传递给其所有子级？{this.props.children}

答案 1

用新道具克隆儿童

您可以使用 React.Children 来迭代子元素，然后使用 React.cloneElement 使用新的 props（浅层合并）克隆每个元素。例如：

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

function Parent({ children }) {
  function doSomething(value) {
    console.log("doSomething called by child with value:", value);
  }

  const childrenWithProps = React.Children.map(children, child => {
    // Checking isValidElement is the safe way and avoids a typescript
    // error too.
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { doSomething });
    }
    return child;
  });

  return <div>{childrenWithProps}</div>
}

function App() {
  return (
    <Parent>
      <Child value={1} />
      <Child value={2} />
    </Parent>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="container"></div>

将孩子作为函数调用

或者，您可以使用渲染道具将道具传递给儿童。在这种方法中，子项（可以是或任何其他 prop 名称）是一个函数，它可以接受要传递的任何参数并返回子项：children

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

function Parent({ children }) {
  function doSomething(value) {
    console.log("doSomething called by child with value:", value);
  }

  // Note that children is called as a function and we can pass args to it.
  return <div>{children(doSomething)}</div>
}

function App() {
  // doSomething is the arg we passed in Parent, which
  // we now pass through to Child.
  return (
    <Parent>
      {doSomething => (
        <React.Fragment>
          <Child doSomething={doSomething} value={1} />
          <Child doSomething={doSomething} value={2} />
        </React.Fragment>
      )}
    </Parent>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="container"></div>

如果您愿意，也可以返回数组，而不是或简单地返回数组。<React.Fragment><>

答案 2

要获得稍微干净一点的方法，请尝试：

<div>
    {React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}
</div>

编辑：要与多个单独的子项（子项本身必须是一个组件）一起使用，您可以执行。在 16.8.6 中测试

<div>
    {React.cloneElement(this.props.children[0], { loggedIn: true, testPropB: true })}
    {React.cloneElement(this.props.children[1], { loggedIn: true, testPropA: false })}
</div>