Question

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

是否可以在父元素上使用三元运算符来检查子元素属性是true还是false？

 // 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>

Answer 1

您可以只使用条件来不渲染项目

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

Answer 2

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

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

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

2 个答案: