TL; DR：Set empty string：

Question

如何将没有值的道具传递给反应组件？

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

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

我似乎无法找到任何关于此的参考，但通过观察这些属性的值，默认情况下它们会被分配到true。

Answer 1

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

官方React documentation有以下内容：

布尔属性

使用带有属性的HTML表单元素时，通常会出现这种情况   像禁用，必需，检查和阅读。   省略属性的值会导致JSX将其视为true。至   传递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所述，如果你想传递一个＆＃34;空道具＆＃34;您可以简单地将其赋予null甚至undefined的价值。

所以你可以这样做：

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

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

Answer 2

是的JSX认为没有=的属性是布尔值true。

一个选项是简单地设置空值：

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

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

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

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

Answer 3

TL; DR：Set empty string：

<Amp.AmpAccordion animate="">

说明

复制并粘贴上面的链接：

任何带有空字符串的属性都将呈现到DOM中而没有值。

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


空属性语法
只是属性名称。该值隐式为空字符串。
在下面的示例中，禁用属性使用空属性语法给出：
<input disabled>
如果使用空属性语法的一个属性后面是另一个属性，则必须有一个空格字符将两者分开。

如何将没有值的道具传递给组件

3 个答案:

布尔属性

实施例

解决方案

TL; DR：Set empty string：

说明