如果第三个子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>
您可以只使用条件来不渲染项目
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句