时间戳

首页 > 解决方案 > 如果子属性为真，如何禁用父元素的呈现

reactjs - 如果子属性为真，如何禁用父元素的呈现

问题描述

如果第三个子 TD 的属性等于 true，我想禁用父 TR 元素的呈现。

有没有办法在父元素上使用三元运算符来检查子元素属性是真还是假？

 // Setting my GET request response data to users

 componentDidUpdate() {
   axios.get('http://localhost:3000/api/users')
     .then(response => {
       this.setState({ users: response.data });
     })
     .catch(function (error) {
       console.log(error);
     })
 }

  // Mapping my data from GET request to the proper table and 
  using a ternary operator to check if GET data group is equal to 
  the current group and setting to true or false

  <tbody>
    {this.state.users.map(function (singleuser, i) {
      return [
       <tr key={i} style={{ color: '#fff' }}>
        <td>{singleuser.name}</td>
        <td>{singleuser.email}</td>
        <td selected={user.group.toString() === singleuser.group.toString()}>{singleuser.group}</td>
      </tr>
      ]
   })}
 </tbody>

标签： reactjsconditional-statementsparent-child

解决方案

您可以使用条件渲染来显示它，或者其他东西。类似于...的东西

const enabled = this.state.enabled;
{enabled ? <tr> <td>1</td><td>2</td><td>3</td></tr>:'no table row'}

这是我制作的代码笔示例。您可以通过更新状态https://codepen.io/anon/pen/xNoEjQ来更改真/假

推荐阅读