なぜ状態変化に反応しないのですか？

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 />; 
    } 

が真の場合は、新しい出力をレンダリングします。 `partは次のようなレンダリング関数内にリターン部分を持つクラスです：

var Thanks = React.createClass({ 

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

}); 

これは表示されません。任意のアイデアなぜ？

私のファイルの別の部分で見知らぬ事はこれのようであり、その部分が動作します。つまり、以前に送信ボタンをクリックすると、キーと値のペアがfalseからtrueに変更され、新しいページレイアウトがレンダリングされます。ただここで働いていない。多分IVEは、小さな何かを逃した。..

Answer 1

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

これは、あなたはいつも私はあなたがJSXとして変数を設定することができると思ういけないrender

Answer 2

の内側に何かを返す必要が

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

する必要がありますので、イム間違っている場合これを無視してください。この場合、おそらくレンダーしようとしているようですが、

{output} 

あなたのコードのどこかにあるようです。代わりに

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