如何在反应创建元素中添加没有值的数据属性？

Question

我加入div为下面的DOM，

React.createElement("div", { className: "test"});

呈现的HTML应如下

<div class="test" data-test> 
</div> 

我在哪里可以在createElement添加data-test？

Answer 1

你不能这么做，因为没有任何值的属性意味着该属性在JSX中的值为true。只是不通过data-test和this.props['data-test']将在您的组件中未定义。或者，如果您需要将此属性设为空值，请将其添加到组件定义中的默认值。

defaultProps: { 
    'data-test': '' 
} 

Answer 2

如果你指的是文档上createElement API，你可以插入这样的价值，你的数据测试道具：

React.createElement('div', {className: 'test', 'data-test': 'some value'}); 

Answer 3

首先，我不这样推荐自己，因为这样会在没有React知识的情况下操纵DOM。我只是为了完成目的而提出这个答案。

现在到了解决方案，你可以做到这一点 -

<div className="test" ref={divEl => divEl.setAttribute("data-test", '')}></div> 

这应该设置一个空的属性，只要你想的DOM元素。