构造函数的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。