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>

  }
});

submission.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

list.jsx

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

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

1 个答案: