Question

我有一个childComponent，其中有几个inputs我想通过将disabled属性设置为true来禁用。

我得到的一个解决方案是使用传递给孩子的布尔属性来禁用输入，这很好用。

我正在尝试更高阶的parentComponent。

我正在使用this.props.children访问父级的子级，克隆每个子级，并将disabled属性设置为true。

children中的一些人有自己的children。

我唯一担心的是，我与孩子们的孩子打交道的方式有点冗长。

必须有一种更精简/更易读的方式来实现我的目标。

在使用this.props.children时改变儿童的道具的最惯用的方法是什么？

我可以使用解构e.g. const { children } = this.props，但这只会走很远。

命名一个const实际上可以做到，但是想知道是否还有另一种方法。

export default class ParentComponent extends Component {
  constructor(props){
    super(props)
  }

  renderChildren() {
    return React.Children.map(this.props.children.props.children, child => {
      if (child) {
        return React.cloneElement(child, {
          disabled: true
        })
      }
    });
  }

  render() {
    return (
      <div>
        {this.renderChildren()}
      </div>
    );
  }
}


class ChildComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const arrayOfChildren = this.props.elements.map(ele => <SecondChildComponent ele={ele}/>)
    return (
      <div>
        <Input
          disabled={this.props.disabled}
        />
        {arrayOfChildren}
        <button
          disabled={this.props.disabled}
        >
          Click me...
        </button>
      </div>
    );
  }
}


export default ChildComponent;

在React中改变儿童道具的惯用方法

0 个答案: