コンストラクタのthis.state内の条件付きIF文

Question

私のコンストラクタの状態変数の中にある場合、条件式をレンダリングしようとしています。

私の元のコードは次のようであり、それは

constructor(props, context){ 
    super(props, context); 
} 
this.state={ 
    ... // the rest of my state 
    columns: [{ 
    render:   
     row => (
     row.row.exported === 0 ? 

     <span className={styles.centered} > 
     { 
      row.value === true ? <img src={checkedImage} /> 
       : <img src={uncheckedImage} /> 
     } 
     </span>: "" 
    ), 
    maxWidth: 60, 
    hideFilter: true, 
    style: {textAlign:"center"}, 
    }] 
} 

作品と私はこのような何かやりたい：を使用して、私のレンダリング方法イムで

constructor(props, context){ 
     super(props, context); 

    this.state={ 
     ... // the rest of my state 
     columns:    
     render: 
      if(this.state.profile.role == 'dba' || this.state.profile.role == 'both'){ 
      row => (
      row.row.exported === 0 ? 
      <span className={styles.centered} > 
       { 
       row.value === true ? <img src={checkedImage} /> 
        : <img src={uncheckedImage} /> 
       } 
      </span>: "" 
      } 
     ), 
     maxWidth: 60, 
     hideFilter: true, 
     style: {textAlign:"center"}, 
     }] 
    } 
    } 

を反応させ、テーブルですので、次のようになります。

Renderメソッド

render(){ 
return(
    <ReactTable columns={this.state.columns} /> 
) 
} 

は、それは可能ですかこれを達成するために、周りのすべての作業はありますか？

Answer 1

コールバック内でifステートメントを引き出し、コールバックを本体に渡します。その後、適切な条件を使用することができます。あなたは関数本体を使用すると、三項演算や制御フローのためのif文のいずれかを使用することができます持っているので

render: (row) => { 
    if(this.state.profile.role == 'dba' || this.state.profile.role == 'both'){ 
    return (
    row.row.exported === 0 ? 
    <span className={styles.centered} > 
     { 
     row.value === true ? <img src={checkedImage} /> 
      : <img src={uncheckedImage} /> 
     } 
    </span>: "" 
    } 
), 

} ：クイックフィックスは、このような少し何かを見てフォームを持っているでしょう。

個人的に、これは少し厄介に見えるとIdはどこか外の関数を定義するように、全体の定義が深くオブジェクトリテラルにネストされています

const rowRender = (row) => { ...the code above... } 

columns:    
     render: (row) => rowRender(row), 
     maxWidth: 60, 
     hideFilter: true, 
     style: {textAlign:"center"}, 
     }] 

Answer 2

あなたがしようとしていることを理解するのは少し難しいですが、これはコードが改善する必要があるという重要な信号です。良い方法は、レンダリングメソッドに状態とすべての独自のコンポーネントである列を持たせることです。

現在のコンポーネントから小道具を渡してから、現在のコンポーネント内とcolumnコンポーネント内から条件付きレンダリングを行うことができます。私は乱暴にここに推測していますが、あなたのコンポーネントは、このような種類のことができます。

... 
render() { 
    return() { 
    ... 
    { 
     this.state.profile.role === 'dba' || this.state.profile.role === 'both' 
     ? (
     <Column 
      row={this.props.row} 
      checkedImage={checkedImage} 
      uncheckedImage={uncheckedImage} 
      ... // other props 
     /> 
     ) 
     : null 
    } 
    ... 
    } 
} 
... 

だから、私は条件付きであなたがすることもでき、私のコンポーネントの状態に応じて、列（代わりの三元をレンダリングしています、ここでやっているものをちょうど&&を使用してください）。今Column内側：

... 
render() { 
    return() { 
    this.props.row.exported === 0 
     ? (
     <span className={styles.centered} > 
      { 
      this.props.row.value === true 
       ? <img src={this.props.checkedImage} /> 
       : <img src={this.props.uncheckedImage} /> 
      } 
     </span> 
    ) 
     : null 
    } 
} 
... 

これは、はるかに明確であり、また、あなたが簡単にあなたのColumnコンポーネントとそのレンダリングロジックを変更することができます。また、あなたは.filterで伝承されている列を変更することができますあなたの質問に編集を考える

EDIT

。あなたはJSに精通していない場合

render() { 
    const columns = this.state.columns.filter(column => { 
    return (this.state.profile.role === 'dba' || this.state.profile.role === 'both'); 
    } 

    return() { 
    <ReactTable columns={columns} /> 
    } 
} 

filterいくつかのドキュメントhereを確認します。この場合、あなたのrenderメソッドは次のようになります。