Как булевы реквизиты используются в React?

Question

Я пытаюсь прояснить некоторую путаницу (желательно из авторитетных источников) о булевых реквизитах в React.

Предположим, у них есть MyComponent с несколькими логическими реквизитами prop1, prop2 ...

Во-первых: может показаться, что булевы реквизиты похожи на другие: вы можете определить значения по умолчанию, либо в defaultProps, либо в параметрах деструктурирования :

const MyComponent = ({ prop1, prop2 }) => (
   ...
)

MyComponent.defaultProps = {
  prop1: false,
  prop2: true,
}

Или эквивалентно ( нет?)

const MyComponent = ({ prop1 = false, prop2 = true }) => (
 ...
) 

Что не ясно, как передавать значения. Естественный «стиль реакции», опять же, кажется

  <MyComponent prop1={ BOOLEAN_EXPRESION1 } prop2={ BOOLEAN_EXPRESION2 } />

... включая stati c литералы (false/true).

Однако , также указано , что правильным (рекомендуемым?) Способом передачи логических свойств является наличие / отсутствие атрибута, поскольку HTML5 диктует .

Чтобы вместо <MyComponent prop1={true} prop2={false} /> было написано <MyComponent prop1 />.

---

Мои вопросы:

1. Что такое правильный способ передачи булевых реквизита? Являются ли оба приемлемыми?

2. В случае, если стиль HTML5 является рекомендуемым (или правильным) способом, как можно поступить со значениями Dynami c?

3. Кроме того, если стиль HTML5 приемлем, как насчет значений по умолчанию? В приведенном выше примере (где prop2 по умолчанию true), если я напишу <MyComponent />, что произойдет?

Answer 1

Примечание:

Давайте просто думать об этом по-другому и игнорировать правила, установленные HTML5 и сосредоточенные только на JSX. У JSX есть ровно два способа передачи истинного , <MyComponent prop /> и <MyComponent prop={true} /> и точно одного пути прохождения ложного <MyComponent prop={false} />. Я согласен, что это странное различие между HTML5 и JSX, но JSX является расширением синтаксиса для JavaScript, а не HTML, поэтому он не должен соответствовать ни одному из правил HTML.

Из JSX документов :

Этот забавный синтаксис тега не является ни строкой, ни HTML.

К вашему сведению, все правила и поведение JSX перечислены в документах React JSX и включают в себя информацию о том, как по умолчанию поддерживает значение . Важное примечание : эти документы не наследуют ничего от HTML и не должны сравниваться с HTML спецификациями.

---

Ответы:

1. Как правильно передать логический реквизит?

Передача явного true в JSX:

Существует ровно два способа передать явное true: передача true и по умолчанию для свойства true :

<MyComponent prop={true} />
<MyComponent prop />

Примечание: Как указано в документации, поведение JSX по умолчанию для a prop to true - это просто добавленная функция, которая соответствует поведению логических атрибутов HTML5 .

Передача явного false в JSX:

Существует только один способ передать явное false: передача false

<MyComponent prop={false} />

Примечание: Именно здесь поведение JSX отличается от поведения логических атрибутов HTML5. В JSX нет значения по умолчанию false; это применимо только для передачи явного true. В отличие от HTML5, если вы ничего не передаете, вы действительно передаете undefined, и вместо этого будут использоваться ваши заданные значения по умолчанию. Это противоречит спецификации HTML5, которая говорит, что это false. Обратитесь к ссылке CodeSandbox в ответе # 3 для этого поведения.

Передача логической переменной / выражения в JSX:

Передача переменной или выражения в реквизит:

// via variable
const foo = true;
<MyComponent prop={foo} />
const bar = false;
<MyComponent prop={bar} />

// via expression
<MyComponent prop={Math.random() > 0.5} />

Приемлемы ли оба?

Обращаясь к способу передачи явного true против значения по умолчанию для true, они оба приемлемы с точки зрения компиляции JSX , Однако, если вам нужна согласованность в кодовой базе для соблюдения определенного стиля, добавьте правило ESLint jsx-boolean-value. Я лично использую стиль Airbnb JavaScript, который включает это правило. Руководство делает упор на удобочитаемость, поэтому было решено опустить явное true.

В случае, если стиль HTML5 является рекомендуемым (или правильным) способом, как следует обращаться с динамическими c значениями?

Не использовать стиль HTML5 (по умолчанию) поддерживает true) для значений c (переменные / выражения); используйте способ React для передачи реквизита (явное назначение значений реквизита). Смотрите выше, как пройти эти.

Кроме того, в случае, если стиль HTML5 приемлем, как насчет значений по умолчанию? В приведенном выше примере (где prop1, prop2 - соответственно false / true по умолчанию), что даст?

Вот окончательные значения для prop1 и prop2, переданные соответственно:

MyComponent.defaultProps = {
  prop1: false,
  prop2: true,
}

<MyComponent prop1 />
// prop1 == true
// prop2 == true // defaulted to true

<MyComponent prop1={true} prop2={false} />
<MyComponent prop1 prop2={false} />
// prop1 == true
// prop2 == false

Вот ссылка CodeSandbox: https://codesandbox.io/s/elated-davinci-izut1?fontsize=14&hidenavigation=1&theme=dark

Примечание: Не добавляется атрибут, а затем не передается значение (например, значение prop2 в первом примере) аналогично передаче undefined в отличие от передачи явного false для второго примера. Таким образом, prop2 получил значение по умолчанию true.

Answer 2

Позвольте мне рассказать вам о передаче логических значений

HTML5 Стиль

<MyComponent
  prop2  // equivalent prop2={true}, works only for static true values
  prop1={false} // You can't do something like that for false though
/>

// example
<Select
  multiSelect // You won't be changing this value throughout the whole life cycle
/>

// They will however transpiled to 
React.createElement(MyComponent, {prop1: false, props2: true}, null)
// So passing true isn't necessarily a must

Пропорции по умолчанию

Этот метод не отличается для логических значений по сравнению с другими типами

<MyComponent
  title={title} // typeof title = string | undefined | null
  bold={bold} // typeof bold = boolean | undefined | null
/>

// In case title being undefined or null,
// React will take the defaultProps

defaultProps эквивалентны

static defaultProps = {
  title: 'Hello World',
  bold: true
}

props = {
  title: props.title ?? 'Hello World',
  bold: props.bold ?? true
}


// Or in function, it's much simpler and familiar
// Same as old C, if the props are undefined or null,
// default values will be taken, this is plain 'ol JS
const MyComponent = ({title = 'Hello World', bold = true}) => {
  // boop
}

---

Итак, чтобы подвести итог и ответить на ваш вопрос

1. Что является правильным способ передачи булевых реквизита? Являются ли оба приемлемыми?

Да, оба приемлемы. Реакция неубедительна, в зависимости от того, какой стиль вы используете, AirBnB рекомендует использовать стиль HTML5 для передачи значений stati c true, в то время как старый TypeScript кричит вам, чтобы вы изменили его на props2={true}.

В случае, если стиль HTML5 является рекомендованным (или правильным) способом, как следует обращаться с динамическими c значениями?

HTML5 применимо только для значений c true. У вас просто нет возможности использовать динамические c логические значения в стиле HTML5.

Кроме того, в случае приемлемости стиля HTML5, как насчет значений по умолчанию? В приведенном выше примере (где prop2 по умолчанию равно true), если я напишу <MyComponent />, что произойдет?

<MyComponent /> будет перенесено в React.createElement(MyComponent, {}, null), что означает prop1 и prop2 будет undefined. Учитывая, что значения по умолчанию для prop1 - false, а prop2 - true. Будут приняты соответствующие значения по умолчанию.

Answer 3

Зависит от варианта использования. Вы когда-нибудь слышали о разделении интересов? Тот же принцип применяется здесь. Обращайтесь туда, где есть смысл. Вы можете использовать переменные в компоненте вместо defaultProps (способ React). Если это переключатель, передайте его от родителя.