Javascript 如何让ReactJS呈现空HTML属性

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

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

鉴于我想要：

<myComponent foo />

---

您的问题不是属性值为空；这是因为您的属性既不是本机html规范元素，也不是以

数据

开头的。从以下页面：

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

你应该这样做：

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

render（）{
返回
}

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

---

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

@Alexander——谢谢，但是

componentDidMount

只运行一次，而且通过DOM访问手动设置属性的一般概念非常反作用：）抱歉，它已经是一个

数据-

attr（在编写示例代码时没有注意到这一点），仍然没有出现。

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