React 中如何使用布尔属性? [英] How are boolean props used in React?

问题描述

我试图澄清我对 React 中布尔道具的一些困惑.

假设一个 MyComponent 有几个布尔属性 prop1, prop2...

首先:布尔属性似乎和其他属性一样:您可以在 defaultProps 或解构参数:

const MyComponent = ({ prop1, prop2 }) =>(...);MyComponent.defaultProps = {道具1:假，道具2:真的，}

或者(相当于……我认为)

const MyComponent = ({ prop1 = false, prop2 = true }) =>(...)

不清楚的是如何传递值.再次，自然的React 风格"似乎是

 <MyComponent prop1={ BOOLEAN_EXPRESION1 } prop2={ BOOLEAN_EXPRESION2 }/>

...包括静态文字 (false/true).

但是，它也声明传递布尔属性的正确(推荐?)方法是属性的存在/不存在，如 在 HTML5 中.

因此，应该写 ，而不是 <MyComponent prop1={true} prop2={false}/>.

---

我的问题是:

1. 传递布尔道具的正确方法是什么?都可以接受吗?

2. 如果 HTML5 样式是推荐(或正确)的方式，如何处理动态值?

3. 如果可以接受 HTML5 样式，那么默认值呢?在上面的示例中(其中 prop2 默认为 true)，如果我写 <MyComponent/>， 会是什么值prop2 得到?

---

已编辑:对于已接受的答案，我想添加我自己的提示:为了与 HTML5 风格完美搭配，请设计您的布尔道具，以便它们 默认为 <代码>错误.换句话说:默认为 true 的布尔属性应该被视为反模式.

解决方案

前言:

让我们换个角度思考，忽略 HTML5 建立的规则，只关注 JSX.JSX 有两种传递 true 的方式， 和 <MyComponent prop={true}/> 和正是传递 false 的一种方式 <MyComponent prop={false}/>.我同意这是区分 HTML5 和 JSX 的一个奇怪之处，但 JSX 是 JavaScript 的语法扩展，而不是 HTML，因此它不需要遵守任何 HTML 规则.

来自 JSX 文档:

<块引用>

这个有趣的标签语法既不是字符串也不是 HTML.

仅供参考，JSX 的所有规则和行为都列在 React 的 JSX 文档中，它包括如何将道具默认为true 作品.重要提示:这些文档没有从 HTML 继承任何东西，也不应该与 HTML 规范进行比较.

<小时>

答案:

<块引用>

1. 传递布尔道具的正确方法是什么?

在 JSX 中传递显式 true:

传递显式 true 有两种方法:传递 true 和 将道具默认为真:

<MyComponent prop={true}/><MyComponent 属性/>

注意: 如文档中所述，JSX 将 prop 默认为 true 的行为只是与 HTML5 的布尔属性行为.

在 JSX 中传递显式 false:

传递显式 false 的方法只有一种:传递 false

<MyComponent prop={false}/>

注意:这是 JSX 的行为与 HTML5 的布尔属性行为不同的地方.JSX 中没有默认为 false 这样的事情；它仅适用于传递显式 true.与 HTML5 相比，如果您不传递任何内容，您实际上是在传递 undefined，并且将使用您定义的默认值.这与 HTML5 规范相反，它会说它是 false.有关此行为，请参阅 #3 答案中的 CodeSandbox 链接.

在 JSX 中传递布尔变量/表达式:

将变量或表达式传递给道具:

//通过变量常量 foo = true;<MyComponent 属性={foo}/>常量栏 = 假；<MyComponent 属性={bar}/>//通过表达式<MyComponent prop={Math.random()>0.5}/>

<块引用>

都可以接受吗?

参考传递显式 true 与默认 prop 为 true 的方式，它们在编译 JSX 方面都是可以接受的.但是，如果您需要代码库中的一致性以遵循某种风格，请添加 ESLint 规则 jsx-boolean-value.我个人使用 Airbnb JavaScript 样式来启用该规则.该指南强调可读性，因此决定省略显式 true.

<块引用>

1. 如果 HTML5 样式是推荐(或正确)的方式，如何处理动态值?

不要对动态值(变量/表达式)使用 HTML5 样式(默认 props 为 true)；使用 React 传递 props 的方式(显式分配 prop 值).请参阅上文了解如何通过这些.

<块引用>

1. 此外，如果 HTML5 样式可以接受，那么默认值呢?在上面的示例中(prop1、prop2 默认分别为 false/true)会给出什么?

以下是分别传递的 prop1 和 prop2 的最终值:

MyComponent.defaultProps = {道具1:假，道具2:真的，}<我的组件 prop1/>//prop1 == 真//prop2 == true//默认为 true<我的组件 prop1={true} prop2={false}/><MyComponent prop1 prop2={false}/>//prop1 == 真//prop2 == 假

这里是 CodeSandbox 链接:https://codesandbox.io/s/elated-davinci-izut1?fontsize=14&hidenavigation=1&theme=dark

注意: 不加属性再不传值(如第一个例子中的prop2)和传undefined 不像为第二个示例传递显式 false.因此，prop2 被默认为 true.

I'm trying to clarify some confusion I have about boolean props in React.

Suppose a have MyComponent with several boolean props prop1, prop2...

First: it seems 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,
}

Or (equivalently... I think)

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 } />

... including the static literals (false/true).

However, it's also stated that the correct (recommended?) way to pass boolean properties is presence/absence of the attribute, as in HTML5.

So that, instead of <MyComponent prop1={true} prop2={false} />, one should write <MyComponent prop1 />.

---

My questions are:

1. What is the correct way of passing boolean props? Are both acceptable?

2. In case HTML5 style is the recommended (or correct) way, how would one deal with dynamic values?

3. In case HTML5 style is acceptable, what about default values? In the example above (where prop2 is true by default), if I write <MyComponent />, what value would prop2 get?

---

Edited: To the accepted answer, I'd like to add my own tip: to play along nicely with the HTML5 style, design your boolean props so that they are by default false. Put in other way: a boolean prop that defaults to true should be considered an antipattern.

解决方案

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.

From the JSX docs:

This funny tag syntax is neither a string nor 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.

---

Answers:

1. What is the correct way of passing boolean props?

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 />

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.

Passing an explicit false in JSX:

There is exactly one way to pass an explicit false: passing false

<MyComponent prop={false} />

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.

Passing a boolean variable/expression in JSX:

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?

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.

2. In case HTML5 style is the recommended (or correct) way , how would one deal with dynamic values?

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.

3. Furthermore, in case HTML5 style is acceptable, what about the default values? In the example above (where prop1,prop2 are resp. false/true by default) what would give?

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

Here is the CodeSandbox link: https://codesandbox.io/s/elated-davinci-izut1?fontsize=14&hidenavigation=1&theme=dark

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屋！