Как передать реквизиты без значения для компонента

Как пройти прокладку без значения для реагирующего компонента?

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

Примечание. Для этих реквизитов не заданы значения пропущенных значений по умолчанию.

Я не могу найти никаких ссылок на это, но, наблюдая значения для тех свойств, которым они по умолчанию присваиваются true.

Ответ 1

То, что вы передаете, интерпретируется компилятором как логический атрибут. Это также верно для написания чистого HTML; атрибуты без значений интерпретируются как логическое значение true. Поскольку JSX является синтаксическим сахаром для написания HTML, имеет смысл, что он ведет себя так же.

Официальная документация React имеет следующее:

Булевы атрибуты

Это часто возникает при использовании элементов формы HTML с такими атрибутами, как отключенный, обязательный, проверенный и readOnly. Пропуск значения атрибута заставляет 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 этого

rel="nofollow noreferrer">здесь.

Решение

Как указано в 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).

Ответ 2

Да JSX видит свойства без a = как логическое значение true.

Один из вариантов - просто установить нулевые значения:

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

Вы также можете динамически создавать пакет свойств через объект и при необходимости добавлять свойства. Например:

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

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

Ответ 3

TL; DR: Установить пустую строку:

<Amp.AmpAccordion animate="">

объяснение

Скопировать + вставить ссылку:

Любой атрибут с пустой строкой будет отображаться в DOM без значения.

Соответствующая документация W3C: https://www.w3.org/TR/html5/syntax.html#elements-attributes

Синтаксис пустой атрибуты
Просто имя атрибута. Значение неявно является пустой строкой.
В следующем примере атрибуту disabled присваивается пустой синтаксис атрибута:
<input disabled>
Если для атрибута, использующего пустой синтаксис атрибута, должен следовать другой атрибут, тогда должен быть пробельный символ, разделяющий два.