如何在React中使用布尔属性而不获得警告而不变得冗长?

Question

假设我想创建一个表组件。

在我的<th>元素中，我想让开发人员指定start或end来对齐文本。

我们有这些选项:

<th start="true">Title</th>

可以，但是太啰嗦了。

我们可以把它改成:

<th start>Title</th>

这也可以，但是我们得到这个警告:

Warning: Receivedtruefor a non-boolean attributestart.
如果你想把它写进DOM，传递一个字符串代替:start="true"或开始= {value.toString ()} .

但是<th start>非常优雅，干净，最小，它与HTML的布尔属性兼容。

我们怎么能有一个布尔属性在反应，没有得到警告和不使用样板代码?

Answer 1

在同一个组件上使用(多个)布尔属性通常不是一个好主意。对于您添加的每一个新的布尔属性，您都必须考虑它对所有其他布尔属性的影响。例如，如果有人像这样使用组件，会发生什么并不明显:

<MyTh start="true" end="true"> ... </MyTh>

现在想象一下如果你敢添加第三个道具会发生什么。这就变得非常复杂了。

我建议你把它合并成一个名为textAlignment的道具，或者它所代表的任何东西。用法如下:

<MyTh textAlignment="start"> ... </MyTh>
...
<MyTh textAlignment="end"> ... </MyTh>