“不要設置 React 組件的道具”警告

Question

我收到這個 React.js 錯誤，我很想知道如何修復它。 有沒有辦法在this上調用React.cloneElement ？

警告：不要設置 React 組件的 .props.children 。 相反，在最初創建元素時指定正確的值，或者使用 React.cloneElement 使用更新的 props 創建一個新元素。 該元素是由七創造的。

這是一個完整的工作示例。

這是我的代碼：

var Thead = React.createClass({
  displayName: 'Thead',
  propTypes: function () {
    return {
      children: React.propTypes.node
    }
  },
  componentWillMount: function () {
    this.childTr = containsElement('tr', this.props.children)
    this.props.children = reconcileChildren('th',
      (this.childTr) ? this.childTr.props.children : this.props.children,
      this.props.data
    )
  },
  render: function () {
    return (
      <thead>
        {this.childTr ? <tr {...this.childTr.props}>
          {this.props.children}
        </tr> : <tr>
          {this.props.children}
        </tr>}
      </thead>
    )
  }
})

Answer 1

正如@fuyushimoya 在評論中所說，不鼓勵更改props （我不知道），我將孩子設置為this.children 。

var Thead = React.createClass({
  displayName: 'Thead',
  propTypes: function () {
    return {
      children: React.propTypes.node
    }
  },
  componentWillMount: function () {
    this.childTr = containsElement('tr', this.props.children)
    this.children = reconcileChildren('th',
      (this.childTr) ? this.childTr.props.children : this.props.children,
      this.props.data
    )
  },
  render: function () {
    return (
      <thead>
        {this.childTr ? <tr {...this.childTr.props}>
          {this.children}
        </tr> : <tr>
          {this.children}
        </tr>}
      </thead>
    )
  }
})