Условно передать булеву опору с именем динамической опоры компоненту React

Question

Я знаю, что логические реквизиты могут быть переданы компоненту React как true или false просто по их наличию или отсутствию (согласно Документация React JSX и этот ответ Artif3x в этот вопрос StackOverflow .

Итак, у меня может быть что-то вроде <MyEvent isRecurring />, которое передает isRecurring реквизит как true, тогда как <MyEvent /> будет видеть isRecurring как false (или не определено).

Можно ли передать реквизит без значения (то есть его присутствие означает, что это true), если название реквизита является динамическим (хранится в переменной)?

Например, это не работает :

const propToSetToTrue = someCondition ? 'isRecurring' : 'isArchived'

<MyEvent {propToSetToTrue} />  // Syntactically, not allowed

И, чтобы использовать распространение объекта, мне нужно установить опору равной чему-либо (естественно, это будет true). Это действительно работает , но это не совсем то, что я ищу:

// Assume props already populated at this point
const propToSetToTrue = someCondition ? 'isRecurring' : 'isArchived'
props[propToSetToTrue] = true // This works, but it's not ideal
<MyEvent {...props} />

---

Вариант использования

Я получил несколько комментариев, спрашивающих, зачем мне это может понадобиться. Вот возможный вариант использования при тестировании:

// sharedExamples/props.js

function textDependsOnProp(Component, propName, testId) {
  it(`sets text to 'FOO' when prop '` + propName + `' is given'`, () => {
    const { queryByTestId } = render(<Component {propName} />) // This does not work
    expect(queryByTestId(testId).textContent).toEqual('FOO')
  })

  it(`sets text to 'BAR' when prop '` + propName + `' is not given'`, () => {
    const { queryByTestId } = render(<Component />)
    expect(queryByTestId(testId).textContent).toEqual('BAR')
  })
}

Мои тесты находятся в процессе рефакторинга для использования во многих различных компонентах, и фактическое имя пропуска, на котором следует сфокусироваться, может быть различным для каждого компонента, поэтому имя опоры является динамическим.

Итак, должен ли я просто забыть о том, что я считал идеальным, и просто явно установить для моей опоры значение true, например, так:

const props = {}
props[propName] = true
render(<Component {...props} />)

Мне показалось, что это 2 дополнительные строки кода для чего-то, что я считал тривиальным.

Или есть способ сделать это похожим на то, что я написал выше?

Answer 1

Проверьте эти примеры:

// Пример (1)

props['isRecuring'] = true;
<MyEvent {...props}/> // => <MyEvent isRecuring={true}/>

// Пример (2)

<MyEvent isRecuring/>

// Пример (3)

props['isRecuring'] = undefined;
<MyEvent {...props}/> // => <MyEvent /> mean the isRecuring is not present

Попробуйте отобразить значение реквизита в MyEvent

const MyEvent = (props) => (
   <div>props: {JSON.stringify(props)}</div>
)

Результатом примера (1) является {}, а (2) и (3) отображают {"isRecuring": true}

Основываясь на приведенном выше примере, я могу сказать, что распространение будет игнорировать реквизиты со значением undefined. Следовательно, он не присутствует и никогда не будет передан в качестве реквизита компоненту (MyEvent).

Я думаю, что ваше решение - единственный способ передать булевы реквизиты с использованием спреда. Это вопрос распространения в JS, а не Реакции вообще.

Answer 2

Документация гласит: "В общем, мы не рекомендуем использовать это, потому что его можно спутать с сокращением объекта ES6 {foo}, которое сокращенно от {foo: foo}, а не {foo: true}. Такое поведение как раз там, чтобы оно соответствовало поведению HTML. " - Я понимаю идею, но вам, вероятно, лучше передать true.