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

Question

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

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

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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

官方React documentation有以下内容：

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 equivalent in JSX for disabling a button
<input type="button" disabled />;
<input type="button" disabled={true} />;
// And these two are equivalent in JSX for not disabling a button
<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 所说，如果你想传递一个 "empty prop" 你可以简单地给它 null 甚至 undefined.

的值

所以你可以这样做：

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

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

Answer 3

TL;DR: Set empty string:

<Amp.AmpAccordion animate="">

说明

上面link的复制+粘贴：

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

空属性语法
只是属性名称。该值隐含为空字符串。
In the following example, the disabled attribute is given with the empty attribute syntax:
<input disabled>
如果使用空属性语法的属性后跟另一个属性，则必须有一个 space 字符分隔两者。

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

How to pass props without value to component

javascript

reactjs

react-jsx

Boolean Attributes

例子

解决方案

TL;DR: Set empty string:

说明