javascript - 卸载不触发 componentWillUnmount 的 child

Question

问题

InputsList.jsx 的 unmountInput 中的 React.unmountComponentAtNode 不会触发 中的 componentWillUnmount >Input.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)。

如果你想改变你的组件的 child ，你需要改变你的数据( Prop /状态)，以便渲染提供所需的输出。

因为您使用 this.props.inputs，所以您的选择是:

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

阅读Thinking in React (也许多次，我至少读过 5 次)。