【问题标题】：How to pass props without value to component如何将没有价值的道具传递给组件
【发布时间】：2016-10-16 03:52:57
【问题描述】：

如何将没有值的 prop 传递给 react 组件？

<SomeComponent disableHeight> {/* here */}
    {({width}) => (
        <AnotherComponent
            autoHeight {/* and here */}
            width={width}
            height={300}
            {...otherProps}
        />
    )}
</SomeComponent>

注意 - 没有为这些道具指定默认道具值。

我似乎找不到任何相关参考，但通过观察这些属性的值，它们默认分配给 true。

【问题讨论】：

标签： javascript reactjs react-jsx

【解决方案1】：

您传递的内容被编译器解释为布尔属性。在编写纯 HTML 时也是如此；没有值的属性被解释为布尔值true。由于 JSX 是编写 HTML 的语法糖，因此它具有相同的行为是有道理的。

官方React documentation有以下内容：

布尔属性

这通常在使用带有属性的 HTML 表单元素时出现像 disabled、required、checked 和 readOnly。省略属性的值会导致 JSX 将其视为 true。到 pass false 必须使用属性表达式。

// 这两个在 JSX 中等效用于禁用按钮
<input type="button" disabled />;
<input type="button" disabled={true} />;
// 这两个在 JSX 中是等价的，因为没有禁用按钮
<input type="button" />;
<input type="button" disabled={false} />;

示例

JSX：

<div>
  <Component autoHeight />
  <AnotherComponent autoHeight={null} />
</div>

JS：

React.createElement(
  "div",
  null,
  React.createElement(Component, { autoHeight: true }),
  React.createElement(AnotherComponent, { autoHeight: null })
);

查看 babel 演示，here。

解决方案

正如 ctrlplusb 所说，如果你想传递一个“空道具”，你可以简单地给它 null 甚至 undefined 的值。

所以你可以这样做：

<SomeComponent disableHeight={null}>
    {({width}) => (
        <AnotherComponent
            autoHeight={null}
            width={width}
            height={300}
            {...otherProps}
        />
    )}
</SomeComponent>

虽然我会注意到将其传递为undefined 可能完全没有必要，因为从AnotherComponent 读取this.props.autoHeight 将始终为您提供undefined，无论您是否明确将其传递为autoHeight={undefined} 或根本不传递。在这种情况下传递 null 可能会更好，因为您通过声明它的值...“无值”（即 null）来明确传递道具。

【讨论】：

我完全错过了文档的那部分，因为我认为它仅适用于 disabled、required 等布尔属性...感谢您的澄清。
请注意不要混淆 HTML 属性和 DOM 的HTMLElement 接口的属性。 React DOM 直接使用元素 property，它确实是一个布尔值，设置为 true/false。但是所谓的 HTML“布尔属性”不能有 true 值。它可能会丢失以指示 false，或指示 true，它可以以无值、空值或“ASCII 大小写的值-属性的规范名称的不敏感匹配，没有前导或尾随空格。” JSX 有自己的第三套规则，已正确引用。
@AndrewF 我认为这篇文章试图强调的一点是 JSX 试图尽可能地模仿 HTML。这是一个相当新手问题的答案，没有必要用如此彻底的解释过度复杂化。 HTML 不是一种编程语言，所以布尔值和其他类型无论如何都没有意义。感谢您的评论，但任何有经验的开发人员都可以毫无问题地在字里行间阅读。
JSX 在某些方面模仿 HTML 标记，在其他方面模仿 HTML DOM 接口。我不相信开发人员会轻易地在这个主题上“读懂字里行间”。标记和 DOM API 之间的关系是一个常见的混淆来源。误解：“布尔值和其他类型在那里没有意义”。 DOM API 使用强类型（在 JS 中确实体现），并且 HTML 规范本身定义了“布尔属性”以及它如何映射到（严格布尔）DOM 接口属性。 HTML/DOM 数据的输入和流动的细微差别对许多人来说很重要，当然足以保证补充评论。
@RobEvans，哎呀。是的，你是 120% 正确的。我马上修！谢谢。

【解决方案2】：

TL;DR:Set empty string:

<Amp.AmpAccordion animate="">

说明

从上面的链接复制+粘贴：

任何带有空字符串的属性都会在没有值的情况下呈现到 DOM 中。

W3C 相关文档：https://www.w3.org/TR/html5/syntax.html#elements-attributes

空属性语法
只是属性名称。该值隐含为空字符串。
在下面的示例中，禁用属性以空属性语法给出：
如果使用空属性语法的属性后跟另一个属性，则必须用空格字符分隔两者。

【讨论】：

【解决方案3】：

是的，JSX 将没有 = 的属性视为布尔值 true。

一种选择是简单地设置空值：

<Foo name="Bob" surname={null} />

您还可以通过对象动态构建属性包，并仅在需要时添加属性。例如：

render() {
  const propBag = {
    width: width,
    height: 300
  };
  if (someCondition) {
    propBag.something = 'bob';
  }

  return (
    <FooComponent {...propBag} {..otherProps} />
  );
}

【讨论】：