如何让ReactJS呈现空的HTML属性

How to get ReactJS to render empty HTML attributes

本文关键字：HTML 属性 ReactJS      更新时间：2024-01-11

我试图让React呈现一个空属性，但它根本不包括它。有什么想法吗？

render(){
    return <myComponent foo="{ this.state.foo }" />
}

当this.state.foo为假时，这将产生：

<mycomponent />

而我想要：

<myComponent foo />

您的问题不是属性值为空；您的属性既不是本地html规范元素，也不是以data开头的。来自JSX Gotchas页面：

如果将属性传递给HTML规范中不存在的本地HTML元素，React将不会呈现它们。如果要使用自定义属性，则应在其前面加上data-。

你应该这样做：

render(){
    return <myComponent data-foo={ this.state.foo || '' } />
}

更新（正如@alexander所指出的）：

如果数据foo可以返回null，您还需要指定一个备份空字符串。我已经更新了我的示例

相关文章：