javascript - 如何与未指定数量的 react 子组件交互

Question

我有一个可以包含任意数量的子组件的组件，并且我希望这些包含输入字段的子组件在父组件中的状态更改时将这些输入字段设置为“禁用”。我一直在尝试将 React.cloneElement 与 React.Children.map 一起使用来修改子元素的属性，但它似乎没有影响任何内容。

这是一个简化版本:

# parent component
# assume that there's a @setState call in here somewhere
DisableableItem = React.createClass
  getInitialState: ->
    disabled: false
  render: ->
    <div>
      {
        React.Children.map @props.children, (child) =>
          React.cloneElement child, isDisabled: @state.disabled
      }
    </div>

# child component
ParameterizedOption = React.createClass
  getInitialState: ->
    disabled: @props.isDisabled
  render: ->
    <div className="parameterized-option">
      <label>{@props.text}</label>
      <div className="input-group input-group-sm">
        <input type={@props.inputType or "text"} className="form-control"
          placeholder={@props.initialInput or "00.00"}
          disabled={@state.disabled}></input>
      </div>
    </div>

渲染如下:

React.render <DisableableItem>
    <ParameterizedOption text="hey" isDisabled=false />
    <ParameterizedOption text="hey" isDisabled=false />
  </DisableableItem>, document.body

所以我正在console.log输出，并且父级中的状态在我想要的时候被修改，但是子级的 props 并没有像我想象的那样被修改React.cloneElement 调用会修改它们(它们总是像开始时一样为 false)。我看过these questions ，但我认为它们并不真正适用，因为 DisableableItem 不知道它的子项是什么，直到它们在对 React.render 的调用中被赋予它，因此它不能将 disabled={@state.disabled} 作为子属性之一。

我如何进入并修改这些 child 的状态？我是否误解了 cloneElement 应该做什么？

Answer 1

你正在将 Prop 复制到状态，这是一些糟糕的魔力。 (https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html)

只需将 props.disabled 直接绑定(bind)到元素，而不是将其复制到状态。

<小时/>

您当前的代码:

getInitialState: ->
    disabled: @props.isDisabled

仅当您确保更新 componentWillReceiveProps 中的 state.disabled 以反射(reflect)传入的新 props.disabled 时，此操作才会起作用。

如果你一心想用奇怪的方式来做:https://jsfiddle.net/1t8ew85x/