使用 this.props.children() 和 React.cloneElement 进行渲染时，如何将 Parent 道具传递给 Children？

Question

<CheckboxGroup name="fruits" value={fruits} onChange={this.setFruits}>
    {(cb) => (
      <>
        <label>
          <Checkbox value="apple" /> Apple
        </label>
        <label>
          <Checkbox value="orange" /> Orange
        </label>
        <label>
          <Checkbox value="watermelon" /> Watermelon
        </label>
      </>
    )}
  </CheckboxGroup>

这里是父组件。我想将名称、值和 onChange 传递给孩子们。

class CheckboxGroup extends React.Component {
   constructor(props){
    super(props);
    this.state = {
      value: this.props.value,
      name: this.props.name
    }
  }
  render() {
    const children = React.Children.map(this.props.children(), child => {
      return React.cloneElement(child);
    });
   return(
     <>
      {children}
     </>
   )
  }
  }
  class Checkbox extends React.Component {
 constructor(props){
   super(props);
 }
 render() {
   console.log(this.props);
   return (
     <>
       <input type="checkbox" value="" name=""  />
     </>
   );
 }
}

如何在孩子中获得父母的道具？我使用的是this.props.children() 而不是this.props.children。从父母那里，我尝试过 React.cloneElement(child, {this.props}) 但不起作用。

Answer 1

据我所知，似乎不需要使用 cloneElement API。你应该能够用更简单的东西来完成你所追求的。

我们可以在最顶层提供我们的数据（即水果），并使用数据结构映射每个项目以呈现带有名称、值和 onChange 回调的复选框组件。不需要克隆任何东西，我们的组件没有自己的状态，所以它们可以是简单的函数组件。

const Checkbox = ({ name, value, onChange, isChecked }) => (
  <input
    type="checkbox"
    name={name}
    value={value}
    onChange={onChange}
    checked={isChecked}
  />
)

const CheckboxGroup = ({ name, values, onChange, selectedValues }) => (
  <div>
    {values.map((value, index) => (
      <label key={index}>
        <Checkbox
          {...{ name, value, onChange }}
          isChecked={selectedValues.includes(value)}
        />
        {value}
      </label>
    ))}
  </div>
)

// an example implementation...

const theFruits = ['Banana', 'Apple', 'Orange']

const MyFruitForm = () => {
  const [selectedFruits, setSelectedFruits] = React.useState([])
  const handleChange = (event) =>
    setSelectedFruits((oldFruits) => {
      if (event.target.checked) {
        return [...oldFruits, event.target.value]
      } else {
        return oldFruits.filter((fruit) => fruit !== event.target.value)
      }
    })
  return (
    <CheckboxGroup
      name="fruit-checkboxes"
      values={theFruits}
      onChange={handleChange}
      selectedValues={selectedFruits}
    />
  )
}

ReactDOM.render(<MyFruitForm />, document.getElementById('root'))

<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="root"></div>