構造函數的this.state中的條件IF語句Reactjs

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"}, 
     }] 
    } 
    } 

在我的渲染方法IM反應表所以它看起來像這樣：

Render方法

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

是否有可能或有任何變通來實現這一目標？

Answer 1

拉你的回調內的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>: "" 
    } 
), 

} 既然你有一個函數體，你可以使用三元運算符，或者對於控制流語句。

個人而言，這顯得有些凌亂，整個定義深度嵌套在一個對象字面所以標識定義一個函數之外的某處：

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列。在這種情況下你的渲染方法會是這樣的：

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

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

如果你不熟悉的js filter檢查一些文檔here。