Javascript 如何将没有价值的道具传递给组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37828543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass props without value to component
提问by code-jaff
How does one pass a prop without value to a react component?
如何将没有价值的道具传递给反应组件？
<SomeComponent disableHeight> {/* here */}
{({width}) => (
<AnotherComponent
autoHeight {/* and here */}
width={width}
height={300}
{...otherProps}
/>
)}
</SomeComponent>
Note - there is no default prop values specified for those props.
注意 - 没有为这些道具指定默认道具值。
I can't seem to find any references on that, but by observing values for those properties they get assigned to trueby default.
我似乎找不到任何关于它的引用，但是通过观察它们true默认分配给的那些属性的值。
回答by Chris
What you are passing is interpreted by the compiler as a boolean attribute. This is also true for when writing pure HTML; attributes without values are interpreted as a boolean true. Since JSX is a syntactic-sugar for writing HTML, it makes sense that it has the same behavior.
您传递的内容被编译器解释为布尔属性。编写纯 HTML 时也是如此；没有值的属性被解释为 boolean true。由于 JSX 是用于编写 HTML 的语法糖，因此它具有相同的行为是有道理的。
The official React documentationhas the following:
Boolean Attributes
This often comes up when using HTML form elements, with attributes like disabled, required, checked and readOnly. Omitting the value of an attribute causes JSX to treat it as true. To pass false an attribute expression must be used.
// These two are equivalentin JSX for disabling a button
<input type="button" disabled />; <input type="button" disabled={true} />;// And these two are equivalentin JSX for not disabling a button
<input type="button" />; <input type="button" disabled={false} />;
布尔属性
这在使用 HTML 表单元素时经常出现，具有禁用、必需、选中和只读等属性。省略属性的值会导致 JSX 将其视为 true。要传递 false，必须使用属性表达式。
//这两个是等效于JSX用于禁用的按钮
<input type="button" disabled />; <input type="button" disabled={true} />;//这两个在 JSX中等价于不禁用按钮
<input type="button" />; <input type="button" disabled={false} />;
Example
例子
JSX:
JSX：
<div>
<Component autoHeight />
<AnotherComponent autoHeight={null} />
</div>
JS:
JS：
React.createElement(
"div",
null,
React.createElement(Component, { autoHeight: true }),
React.createElement(AnotherComponent, { autoHeight: null })
);
Check the babel demo of this, here.
在此处查看 babel 演示。
Solution
解决方案
As ctrlplusb stated, if you want to pass an "empty prop" you can simply give it the value of nullor even undefined.
正如 ctrlplusb 所说，如果你想传递一个“空道具”，你可以简单地给它null或的值undefined。
So you could do:
所以你可以这样做：
<SomeComponent disableHeight={null}>
{({width}) => (
<AnotherComponent
autoHeight={null}
width={width}
height={300}
{...otherProps}
/>
)}
</SomeComponent>
Though I will note that passing it as undefinedis probably entirely unnecessary because reading this.props.autoHeightfrom AnotherComponentwill always give you undefined, regardless if you explicitly passed it as autoHeight={undefined}or not at all. Passing nullis probably better in such cases since you are explicitly passing the prop by stating that it has the value of... "no value" (i.e null).
虽然我会注意到传递它 asundefined可能是完全没有必要的，因为 read this.props.autoHeightfromAnotherComponent总是会给你undefined，不管你是否明确地传递了它autoHeight={undefined}。null在这种情况下，传递可能更好，因为您通过声明它具有...“无价值”（即null）的值来明确传递道具。
回答by ctrlplusb
Yeah JSX sees properties without a =as being a boolean true.
是的，JSX 将没有 a 的属性=视为布尔值 true。
One option is to simply set null values:
一种选择是简单地设置空值：
<Foo name="Bob" surname={null} />
You could also dynamically build a property bag via an object and only add the properties if required. For example:
您还可以通过对象动态构建属性包，并仅在需要时添加属性。例如：
render() {
const propBag = {
width: width,
height: 300
};
if (someCondition) {
propBag.something = 'bob';
}
return (
<FooComponent {...propBag} {..otherProps} />
);
}
回答by ghashi
TL;DR: Set empty string:
TL;DR：设置空字符串：
<Amp.AmpAccordion animate="">
Explanation
解释
A copy+paste from the link above:
从上面的链接复制+粘贴：
Any attribute with an empty string will render into the DOM without a value.
W3C relevant documentation: https://www.w3.org/TR/html5/syntax.html#elements-attributes
Empty attribute syntax
Just the attribute name. The value is implicitly the empty string.In the following example, the disabled attribute is given with the empty attribute syntax:
<input disabled>If an attribute using the empty attribute syntax is to be followed by another attribute, then there must be a space character separating the two.
任何带有空字符串的属性都将在没有值的情况下呈现到 DOM 中。
W3C 相关文档：https: //www.w3.org/TR/html5/syntax.html#elements-attributes
空属性语法
只是属性名称。该值隐式为空字符串。在以下示例中， disabled 属性使用空属性语法给出：
<input disabled>如果使用空属性语法的属性后跟另一个属性，则必须有一个空格字符将两者分开。
