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

在我的渲染方法中使用 react-table ，所以它看起来像这样：

渲染方法

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

是否有可能或有任何解决方法可以解决这个问题？

Answer 1

有点难以理解您要做的事情，这是您的代码需要改进的重要信号。一个很好的选择是让列成为他们自己的组件，使用一个状态和所有的渲染方法。

您可以从当前组件传递道具，然后从当前组件内部和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。

Answer 2

在你的回调中拉出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>: ""
  }
),

} 由于您有一个函数体，因此您可以使用三元运算符或if语句来控制流。

就个人而言，这看起来有点混乱，整个定义深深地嵌套在对象文字中，所以我在外面的某处定义了一个函数：

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

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

构造函数Reactjs的this.state中的条件IF语句

2 个答案: