Fatal编程技术网
  • reactjs/
  • 构造函数Reactjs的this.state中的条件IF语句

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

reactjs

构造函数Reactjs的this.state中的条件IF语句,reactjs,Reactjs,我试图在构造函数的状态变量中呈现条件if 我的原始代码是这样的，它可以工作 constructor(props, context){ super(props, context); } this.state={ ... // the rest of my state columns: [{ render: row => ( row.row.exported === 0 ? <span classNa

我试图在构造函数的状态变量中呈现条件if

我的原始代码是这样的，它可以工作

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

构造函数（道具、上下文）{
超级（道具、背景）；
}
这个州={
…//我所在州的其他人
栏目：[{
提供：
行=>(
row.row.exported==0？
{
row.value==真？
: 
}
: ""
),
最大宽度：60，
hideFilter:是的，
样式：{textAlign:“中心”}，
}]
}
我想这样做：

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

构造函数（道具、上下文）{
超级（道具、背景）；
这个州={
…//我所在州的其他人
柱：
提供：
if（this.state.profile.role='dba'| | this.state.profile.role=='both'）{
行=>(
row.row.exported==0？
{
row.value==真？
: 
}
: ""
}
),   
最大宽度：60，
hideFilter:是的，
样式：{textAlign:“中心”}，
}]
}
}
在我的渲染方法中，我使用了反应表，因此它看起来像这样：

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

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

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

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>: ""
  }
),
渲染方法

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

render（）{
返回(
)
}
有没有可能或者有什么办法来实现这一点？

要理解您正在尝试做什么有点困难，这是一个重要的信号，表明您的代码需要改进。一个好的替代方法是让列作为它们自己的组件，并使用一个呈现方法，即state和all

您可以从当前组件传递道具，然后从当前组件内部和
列
组件内部执行条件渲染。我在这里疯狂地猜测，但您的组件可能是这样的：


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



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

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



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>: ""
  }
),   


这更加清晰，并且允许您轻松地修改
列
组件及其呈现逻辑

编辑

如果对您的问题进行了编辑，您还可以使用
.filter
更改要传递的列。在这种情况下，渲染方法如下所示：


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



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

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



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>: ""
  }
),   



render（）{
const columns=this.state.columns.filter（column=>{
return（this.state.profile.role=='dba'| | this.state.profile.role=='both'）；
}
返回（）{
}
}



如果您不熟悉js
filter
请查看一些文档。
要理解您正在尝试做什么有点困难，这是一个重要的信号，表明您的代码需要改进。一个好的替代方法是让列作为自己的组件，并使用呈现方法、状态和所有内容

您可以从当前组件传递道具，然后从当前组件内部和
列
组件内部执行条件渲染。我在这里疯狂地猜测，但您的组件可以是这样的：


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



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

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



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>: ""
  }
),   


这更加清晰，并且允许您轻松地修改
列
组件及其呈现逻辑

编辑

如果对您的问题进行了编辑，您还可以使用
.filter
更改要传递的列。在这种情况下，您的渲染方法如下所示：


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



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

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



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>: ""
  }
),   



render（）{
const columns=this.state.columns.filter（column=>{
return（this.state.profile.role=='dba'| | this.state.profile.role=='both'）；
}
返回（）{
}
}



如果您不熟悉js
filter
请查看一些文档。
将If语句拉到回调中，并为回调提供一个主体。然后您可以使用适当的条件。快速修复的表单类似于以下内容：


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



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

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



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语句拉入回调函数中，并为回调函数提供一个主体。然后可以使用适当的条件。快速修复的形式类似于：


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



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

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



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>: ""
  }
),   



为什么要将jsx保持在状态…状态不应该只保留纯数据吗？您可以使用renderif进行条件转换rendering@wesley6j我是新手，我该怎么做？@user2906608是否可以在这个.state中使用renderif？您可以同时显示render方法吗？为什么要将jsx保持在state中…state不应该只保留纯数据吗？您可以使用render如果是有条件的rendering@wesley6j我是新手，我该怎么做？@user2906608是否可以在这个.state中使用renderif？你能同时显示render方法吗？谢谢你的完整答案，我知道我的代码是否有问题。我将尝试重构我的代码。你的答案实际上解决了我的问题！谢谢你的完整答案a我知道如果我的代码乱七八糟。我会尝试重构我的代码。你的回答实际上解决了我的问题！