Question

无法解决出错的问题。我单击一个按钮，这将设置状态和状态设置，将键更改为true，如果该键为true，则应呈现不同的输出。这是代码：

点击按钮通话功能：

<input type="submit" value="I can play" onClick={() => this.canPlay()}/>

运行此功能：

 canPlay: function() {
    let name = this.props.value;
    console.log(name, 'name');
    let email = 'mark@mail';
    this.submitUserResponseCanPlay(this.today(), name, email)
    this.setState({thanks: true}) //SET STATE HERE
  },

（感谢在getInitialState中设置为false）

然后在渲染函数中：

render: function(){
    let output;
    if (this.state.thanks){
      output = <Thanks />;
    }

如果状态为true，则渲染新输出。 `part是一个类，它在render函数中只有一个返回部分，如下所示：

var Thanks = React.createClass({

  render: function(){
    return (
      <div id="results" className="search-results">
        Thanks, your answer has been recorded!
      </div>
    )
  }

});

但这并没有显示出来。任何想法为什么??

奇怪的是，我的文件的另一部分是这样的，那部分有效。即我之前单击一个提交按钮，它将键/值对从false更改为true并呈现新的页面布局。只是不在这里工作。也许我错过了一些小事。

Answer 1

render: function(){
let output;
if (this.state.thanks){
  output = <Thanks />;
}

这应该是

render: function(){
if (this.state.thanks){
  return <Thanks />
}

您必须在render

内返回一些内容

Answer 2

我不认为你可以将变量设置为jsx所以如果我错了就忽略它。但在这种情况下，您似乎可能正在尝试渲染

 {output}

代码中的某处。而是用

替换它

{this.state.thank ? <Thanks /> : null}

为什么反应不会在状态变化上呈现？

2 个答案: