Question

我正在努力追随React的“无国籍儿童，有状态的父母”意识形态，并且它完美地运作......直到我开始动态创造孩子，就是这样。

以下是我的代码（CoffeeScript + JSX）的简化版本，它说明了我的困境：

@FormBlock = React.createClass
  getInitialState: ->
    fields: [], editMode: false

  toggle: ->
    @setState editMode: !@state.editMode

  addChild: ->
    child = `<EditableText key={Date.now()} text="FAILS" editMode={this.state.editMode}/>`
    items = @state.fields.concat child
    @setState fields: items

  render: ->
    `<div>
        <a onClick={this.toggle}>Change Mode</a><br/>
        <a onClick={this.addChild}>Add Child</a><br/>
        <EditableText text="WORKS" editMode={this.state.editMode}/><br/>
        {this.state.fields}
    </div>`


@EditableText = React.createClass
  render: ->
    if @props.editMode
      `<input className="editable" defaultValue={this.props.text}/>`
    else
      `<span className="editable">{this.props.text}</span>`

在此示例中，组件<FormBlock>最初不包含fields及其editMode=false。单击editMode按钮将true更改为Change Mode后，<EditableText>组件的内容将从<span>更改为<input>，以便用户可以对其进行更改。

这适用于<FormBlock>的{{1}}方法（即render）中包含的虚拟组件，但这对儿童不起作用。我已经测试过，在创建时，<EditableText text="WORKS".../>类型的每个孩子都会收到其初始<EditableText>，但是当props被修改时，所有孩子都保持不变（我已经确认{{1}不会触发子节点，但它会在虚拟元素上触发。）

我最终试图解决这个问题。请帮忙!!!

Answer 1

您的问题是调用EditableText的结果保存在组件状态中。如果要根据状态动态呈现子组件，请改为在render方法中执行此操作：

＆＃13;

@FormBlock = React.createClass
  getInitialState: ->
    fields: [], editMode: false

  toggle: ->
    @setState editMode: !@state.editMode

  addChild: ->
    items = @state.fields.concat {}
    @setState fields: items

  render: ->
    `<div>
        <a onClick={this.toggle}>Change Mode</a><br/>
        <a onClick={this.addChild}>Add Child</a><br/>
        <EditableText text="WORKS" editMode={this.state.editMode}/><br/>
        { this.state.fields.map @renderChild }
    </div>`

    renderChild: ->
        `<EditableText
            key={Date.now()}
            text="FAILS"
            editMode={this.state.editMode}/>`

＆＃13;

React动态创建的子组件不接收新的道具

1 个答案: