1行で小道具として状態を渡す

Question

以下のコードは機能しません。エラーがあります。モーダルのような別のコンポーネントを表示する方法が不思議ですか？

showModal(){ 
    this.setState({preview:true}) 
    <Modal show={this.state.preview} /> 
} 

previewをtrueに設定し、それをpropに渡すことは冗長だと感じました。モーダルコンポーネントでdefaultPropsを宣言しているので、showはデフォルトでfalseです。Modalを呼び出すコンポーネントのinitialStateで状態をpreviewに設定する必要があるかどうかは疑問です。

Answer 1

返信レンダリングするBabel/HTMLコンポーネント。これはによって達成することができます（ボタンのクリックをなど、イベントの後すなわち）あなたが何かをレンダリングしたいときに、コードを構造化するような方法は、ある

一般

return (
    <Modal show={this.state.preview} /> 
); 

、それが起こるときに状態を設定することです次に、<Modal .. />コンポーネントをレンダリングする本体で、そこにif条件を入れて状態をチェックします。例：

showModal =() => { 
    if(this.state.preview) { 
     return (
      <Modal /> 
     ); 
    } else { 
     return null; 
    } 
} 

render() { 
    return (
     <SampleComponent /> 
     { this.showModal() } 
    ); 
} 

可視性を制御する状態をそのようなコンポーネントに渡さないようにしてください。親コンポーネントの可視性を制御します。