Question

问题

InputsList.jsx 的React.unmountComponentAtNode内的unmountInput不会触发 Input.jsx 中的componentWillUnmount。

代码

这是 InputsList.jsx 的完整代码：

//...
getInitialState: function () {
  return {
    keyRefs: []
  };
},
handleKeyRefs: function () {
  var index = 0;

  this.props.inputs.keys.forEach(function () {
    this.state.keyRefs.push('key-' + index++);
  }.bind(this));
},
componentWillMount: function () {
  this.handleKeyRefs();
},
render: function () {
  return (
    <section className="inputs">
      <ul>
        {this.props.inputs.keys.map(this.renderInput)}
      </ul>
    </section>
  );
},
renderInput: function (key, index) {
  return <Input representation={key.representation} code={key.code} ref={this.state.keyRefs[index]} key={index} />;
},
componentDidMount: function () {
  var inputs  = this.props.inputs.keys
      , index = 0;

  $(window).on('keypress', function (event) {
    if (event.keyCode === inputs[0].code) {
      inputs.shift();

      this.unmountInput(index++);
    };
  }.bind(this));
},
unmountInput: function (index) {
  return React.unmountComponentAtNode(React.findDOMNode(this.refs['key-' + index]));
}
//...

Input.jsx ：

var Input = React.createClass({
  propTypes: {
    representation: React.PropTypes.string
  },
  render: function () {
    return (
      <li className="input">{this.props.representation}</li>
    );
  },
  componentWillUnmount: function () {
    console.log('unmounted!');
  }
});

module.exports = Input;

建议？

Answer 1

除非您之前执行过React.unmountComponentAtNode(node)，否则请勿使用React.render(stuff, node)。

如果要更改组件的子项，则需要更改数据（props / state），以便render提供所需的输出。

因为你使用this.props.inputs，你的选择是：

让使用InputsList的组件给出更新的输入道具
- 你可能想要这个
在状态中存储足够的数据以允许this.props.input.keys.filter(someCondition).map(this.renderInput)

阅读Thinking in React（可能多次，我已经阅读了至少5次）。

卸载不触发componentWillUnmount的子级

问题

代码

1 个答案: