卸载 children 不触发 componentWillUnmount

Question

问题

InputsList.jsx 的 unmountInput 中的 React.unmountComponentAtNode 没有触发 中的 componentWillUnmountInput.jsx.

密码

这是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)，以便渲染提供所需的输出。

因为您使用 this.props.inputs，您的选项是：

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

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

卸载 children 不触发 componentWillUnmount

Unmount children not triggering componentWillUnmount

javascript

reactjs

问题

密码