Атрибуты тега в jsx

287

13 мая 2021, 23:00

Можно ли динамически изменить атрибуты тэга jsx. Для примера есть код

const button = () => {
    return (
    <button
    disabled>
    <button>
    )
}

Нужно динамически изменять атрибут disabled . Что то типа того

const button = () => {
let check = true;
return (
<button
 {check ? disabled : ''}>
<button>
)

}

Можно ли как динамиечески менять атрибут disabled

Answer 1

Да можно.

Вариант первый:

function App() {
  const disabled = true;
  return (
    <div className="App">
      <button disabled={disabled}>click</button>
    </div>
  );
}

Вариант второй дату получаем из props-а и используем оператор spread

if (this.props.disabled) {
  options['disabled'] = 'disabled';
}
return <button {...options}>Click</button>;

Вариант третий опять оператор spread:

function App() {
  const disabled = false;
  return (
    <div className="App">
      <button {...(disabled ? {disabled:true} : {})}>click</button>
    </div>
  );
}

Вариант четвертый стандартный тернарный оператор:

function App() {
  const disabled = true;
  return (
    <div className="App">
      <button disabled={disabled ? 'disabled' : null}>click</button>
    </div>
  );
}

Вариантов может быть очень много это конкретно зависит от ситуации в какой ситуации который вариант может помочь.