Question

我想根据状态进行一些条件渲染。我的状态看起来与此类似：

state = {
  text: '',
  properties: {
     someMoreData: [{...}]
  },
  moreData: ''
}

我想根据状态下someMoreData字段是否存在于属性键中进行条件渲染。我当前的代码如下：

render () {
     console.log(this.state)
     if('someMoreData' in this.state.properties)
     return (
         <div>
          ..
         </div>
     )
}

React引发错误，指出Cannot use 'in' operator to search for 'someMoreData' in undefined

如何格式化我的代码，以便如果存在someMoreData字段，则得到我的JSX，如果不存在，则渲染其他的JSX。

Answer 1

通常，您只需要执行以下操作：

render() {
  return (
    <div>
      {
        this.state.properties.someMoreData && (
          <div>Some other JSX stuff</div>
        )
      }
    </div>
  )
}

但是，Cannot use 'in' operator to search for 'someMoreData' in undefined似乎表明this.state.properties是undefined的原因。不知道为什么只用您发布的代码，但是我会看一下。

Answer 2

您可以使用三元运算符

render() {
  return (
    <div>
      {this.state.properties.someMoreData ? 
          // someMoreData exists
          (<div>Some JSX stuff</div>) 
          :
          //someMoreData does not exist
          (<div>Some other JSX stuff</div>)
      }
    </div>
  )
}

基于状态的条件渲染

2 个答案: