如何显示对象内部的true或false元素？Javascript反应JS

我有一个对象数组，我想显示它的状态值，它是对象内部的一个属性

this.state={
目标：[{
价值：1，
状态：false
}, {
价值：2，
状态：正确
}]
}
}
//const object=[{value:1，status:false}，{value:2，status:true}]

这是我在React中看到的最常见的条件呈现模式，适合您的特定结构：

this.state.objects.map(obj => (
  {obj.status && (
    <div>{obj.value}</div>
  )}
))

this.state.objects.map（obj=>(
{obj.status&&(
{obj.value}
)}
))

如果您经常这样做，在组件中这样做会更容易：

const SomeObject = ({ state, value }) => {
  if (state) {
    return(
      <div>{value}</div>
    )
  } else {
    return null
  }
}

constsomeobject=（{state，value}）=>{
如果（州）{
返回(
{value}
)
}否则{
返回空
}
}

或者，如果组件JSX较长，则提取一个函数：

class SomeObject extends React.PureComponent {
  renderObj = () => (
    <div>
      {this.props.value}
      Other HTML here
    </div>
  )

  render() {
    return this.props.state ? this.renderObj() : null
  }
}

class SomeObject扩展了React.PureComponent{
renderObj=（）=>(
{this.props.value}
其他HTML在这里
)
render（）{
返回this.props.state？this.renderObj（）：null
}
}

---

这将使条件逻辑远离父组件，并简化JSX部分。

制作一个单独的组件以便于工作，然后将

状态

和

值

作为属性发送到组件中的组件，并具有if-else

if(this.props.status)
     return //your render items
  else return null;