React中如何使用布尔型道具? [英] How are boolean props used in React?
问题描述
我正在尝试澄清一些关于React中布尔属性的困惑(最好是来自权威人士).
I'm trying to clarify some confusion (preferably from authoritative sources) about boolean props in React.
假设一个具有多个布尔属性prop1，prop2 ...
Suppose a have MyComponent with several boolean props prop1, prop2...
First: it would seem that boolean props are like just others: you can define default values, either in defaultProps or in destructuring params:
const MyComponent = ({ prop1, prop2 }) => (
...
)
MyComponent.defaultProps = {
prop1: false,
prop2: true,
}
或等效地(否?)
const MyComponent = ({ prop1 = false, prop2 = true }) => (
...
)
尚不清楚如何传递值.同样，自然的反应风格"似乎是
What's not clear is how to pass values. The natural "React style", again, seems to be
<MyComponent prop1={ BOOLEAN_EXPRESION1 } prop2={ BOOLEAN_EXPRESION2 } />
...包括静态文字(false/true).
但是，它也指出，正确(推荐使用)传递布尔属性的方法是该属性的存在/不存在，如 HTML5规定.
However, it's also stated that the correct (recommended?) way to pass boolean properties is presence/absence of the attribute, as HTML5 dictates.
因此，应该写<MyComponent prop1 />而不是<MyComponent prop1={true} prop2={false} />.
我的问题是:
-
传递布尔型道具的正确方法是什么?都可以接受吗?
What is the correct way of passing boolean props? Are both acceptable?
如果建议(或正确)使用HTML5样式，那么如何处理动态值?
In case, HTML5 style is the recommended (or correct) way, how would one deal with dynamic values?
此外，在可以接受HTML5样式的情况下，默认值如何?
在上面的示例中(默认情况下prop2是true)，如果我写<MyComponent />，会发生什么?
Furthermore, in case HTML5 style is acceptable, what about the default values?
In the example above (where prop2 is true by default), if I write <MyComponent />, what would happen?
推荐答案
Forenote:
让我们以不同的方式来考虑，不要理会HTML5建立的仅关注JSX的规则. JSX具有传递true的两种方式，<MyComponent prop />和<MyComponent prop={true} />和传递false的一种方式 <MyComponent prop={false} />.我确实同意这是区分HTML5和JSX的一种奇怪方式，但是 JSX是JavaScript而不是HTML的语法扩展，因此它不需要符合任何HTML规则.
Forenote:
Let's just think this differently and disregard rules established by HTML5 and focusing only on JSX. JSX has exactly two ways of passing true, <MyComponent prop /> and <MyComponent prop={true} /> and exactly one way of passing false <MyComponent prop={false} />. I do agree this is an oddity distinguishing between HTML5 and JSX, but JSX is a syntax extension to JavaScript and not HTML so it does not need to conform to any of the rules of HTML.
从 JSX文档:
这种有趣的标记语法既不是字符串也不是HTML.
This funny tag syntax is neither a string nor HTML.
仅供参考，React的 JSX文档，其中包括如何将道具默认设置为true 有效. 重要提示:这些文档不会从HTML继承任何内容，也不应与HTML规范进行比较.
FYI, all rules and behavior of JSX is listed in React's JSX docs, and it includes how defaulting a prop to true works. Important note: these docs do not inherit anything from HTML and shouldn't be compared with HTML specs either.
- 传递布尔型道具的正确方法是什么?
在JSX中传递明确的true:
传递明确的true的方法有两种:传递true和将道具默认设置为true :
Passing an explicit true in JSX:
There are exactly two ways to pass an explicit true: passing true and defaulting a prop to true:
<MyComponent prop={true} />
<MyComponent prop />
注意:如文档中所述，JSX将prop默认设置为true的行为仅仅是与
Note: As stated in the docs, JSX's behavior of defaulting a prop to true is just an added feature that matches with HTML5's boolean attributes behavior.
传递明确的false的方法只有一种:传递false
There is exactly one way to pass an explicit false: passing false
<MyComponent prop={false} />
注意:这是JSX的行为与HTML5的布尔属性行为不同的地方. JSX中没有默认为false的东西.它仅适用于传递显式true.与HTML5相比，如果不传递任何内容，则实际上是传递undefined，并且将使用定义的默认值代替.这与HTML5规范相反，HTML5规范称其为false.有关此行为，请参考答案#3中的CodeSandbox链接.
Note: This is where JSX's behavior differ from HTML5's boolean attributes behavior. There is not such thing as defaulting to false in JSX; it is only applicable for passing an explicit true. In contrast to HTML5, if you do not pass anything, you're really passing undefined, and your defined default values will be used instead. This is contrary to the HTML5 specs which would say it's false. Refer to the CodeSandbox link in the answer to #3 for this behavior.
将变量或表达式传递给prop:
Pass the variable or an expression to the prop:
// via variable
const foo = true;
<MyComponent prop={foo} />
const bar = false;
<MyComponent prop={bar} />
// via expression
<MyComponent prop={Math.random() > 0.5} />
都可以接受吗?
Are both acceptable?
关于将显式的true与默认的prop传递给true的方式，它们在编译JSX方面都是可以接受的.但是，如果您需要代码库中的一致性以遵循某种样式，请添加ESLint规则jsx-boolean-value.我个人使用Airbnb JavaScript样式来启用该规则.该指南强调可读性，因此决定省略显式的true.
Referring to the way of passing an explicit true vs defaulting a prop to true, they are both acceptable in terms of compiling JSX. However, if you need consistency in a codebase for adhering to a certain style, add the ESLint rule jsx-boolean-value. I personally use the Airbnb JavaScript style which turns that rule on. The guide emphasizes on readability, and so it decided for omitting the explicit true.
- 如果建议(或正确)使用HTML5样式，那么如何处理动态值?
请勿对动态值(变量/表达式)使用HTML5样式(默认为true的道具)；使用React传递道具的方式(明确分配道具值).有关如何传递这些内容，请参见上文.
Do not use HTML5 style (defaulting props to true) for dynamic values (variables/expressions); use the React way of passing props (explicitly assigning prop values). See above for how to pass those.
- 此外，在HTML5样式可以接受的情况下，默认值如何?在上面的示例中(默认情况下，prop1，prop2分别为false/true)将给出什么?
以下是分别传递的prop1和prop2的最终值:
Here are the final values for prop1 and prop2 passed respectively:
MyComponent.defaultProps = {
prop1: false,
prop2: true,
}
<MyComponent prop1 />
// prop1 == true
// prop2 == true // defaulted to true
<MyComponent prop1={true} prop2={false} />
<MyComponent prop1 prop2={false} />
// prop1 == true
// prop2 == false
这里是CodeSandbox链接: https ://codesandbox.io/s/elated-davinci-izut1?fontsize = 14&hidenavigation = 1& theme = dark
Here is the CodeSandbox link: https://codesandbox.io/s/elated-davinci-izut1?fontsize=14&hidenavigation=1&theme=dark
注意:不添加属性然后不传递值(例如第一个示例中的prop2)与传递undefined相同，与之不同的是，为传递显式的false第二个例子.因此，prop2默认设置为true.
Note: Not adding an attribute and then not passing a value (such as prop2 in the first example) is the same as passing undefined unlike passing an explicit false for the second example. Therefore, prop2 got defaulted to true.
这篇关于React中如何使用布尔型道具?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
