javascript - 更新状态，但不在 ReactJS 中重新渲染？

Question

我对 React 很陌生，刚刚入门。我很难理解为什么这不重新渲染列表。这是我的代码:

app.jsx

var Hello = React.createClass({
  getInitialState: function() {
    return {
      links: ['test ']
    }
  },
  render: function() {
    return <div className = "row">
      <Submission linkStore = {this.state.links}/>
      <List links = {this.state.links} />
    </div>

  }
});

var element = React.createElement(Hello, {});
ReactDOM.render(element, document.querySelector('.container'));

在我的submission.jsx中，我有这个函数将信息推送到links数组

  handleSubmitClick: function() {
    this.props.linkStore.push(this.props.text)
    this.setState({text: ''})
    console.log(this.props.linkStore)
  }

我的 list.jsx 看起来像这样

module.exports = React.createClass({
  getInitialState: function() {
    return {
      links: this.props.links
    }
  },
  render: function() {
    return <div>
      {this.props.links}
    </div>
  }
});

一切都按预期进行，我可以让测试正确显示。

我知道这不会显示为实际列表，我应该创建一个列表组件以列表形式显示项目。我只是尝试一路运行测试，看看一切是如何工作的。

Answer 1

使用父state而不是子props。

试试这个

app.jsx

var Hello = React.createClass({
  getInitialState: function() {
    return {
      links: ['test ']
    }
  },
  handleListSubmitClick: function(params) {
      this.setState({links:params});
  },
  render: function() {
    return <div className = "row">
      <Submission linkStore = {this.state.links} handleListSubmitClick={this.handleListSubmitClick}/>
      <List links = {this.state.links} />
    </div>

  }
});

提交.jsx

handleSubmitClick: function() {
    var linkStore = this.props.linkStore;
    linkStore.push(this.props.text)
    this.setState({text: ''})
    this.props.handleListSubmitClick(linkStore);
  }

但我不明白this.props.text。使用 this.refs.ref

输入的值

列表.jsx

module.exports = React.createClass({
  getInitialState: function() {
    return {
      links: this.props.links
    }
  },
  render: function() {
    return <div>
      {this.props.links}
    </div>
  }
});