如何将无价值的道具传递给组件

Question

一个人如何将没有价值的道具传递给反应成分？

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

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

我似乎找不到关于它的任何引用，但是通过观察这些属性的值（它们true在默认情况下会分配给它们）。

Answer 1

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

官方的React文档包含以下内容：

布尔属性

当使用具有禁用，必需，选中和只读的属性的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演示。

解

如ctrlplusb所述，如果您要传递“空道具”，则可以简单地为其赋予值null或undefined。

因此，您可以执行以下操作：

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

虽然我会注意到，把它当作undefined是可能完全不必要的，因为阅读this.props.autoHeight从AnotherComponent总会给你undefined，如果你不管通过明确其作为autoHeight={undefined}或不尽然。null在这种情况下，传递可能会更好，因为您通过声明道具具有…“
no value”（即null）的值来显式传递道具。