Динамічний атрибут у ReactJS

Я хочу динамічно включати / опускати відключений атрибут елемента кнопки. Я бачив безліч прикладів динамічних значень атрибутів, але не самих атрибутів. У мене є така функція візуалізації:

render: function() {
    var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
    return <button {maybeDisabled}>Clear cart</button>
}

Це видає помилку синтаксичного аналізу через символ "{". Як я можу включити / опустити атрибут disabled на основі (логічного) результату AppStore.cartIsEmpty ()?

В даний час найчистішим способом додавання необов’язкових атрибутів (включаючи disabledта інші, які ви можете використовувати) є використання атрибутів JSX-розповсюдження :

var Hello = React.createClass({
    render: function() {
        var opts = {};
        if (this.props.disabled) {
            opts['disabled'] = 'disabled';
        }
        return <button {...opts}>Hello {this.props.name}</button>;
    }
});

React.render((<div><Hello name="Disabled" disabled='true' />
    <Hello name="Enabled"  />
</div>)
, document.getElementById('container'));

Використовуючи атрибути розповсюдження, ви можете динамічно додавати (або перевизначати) будь-які потрібні атрибути, використовуючи екземпляр об’єкта javascript. У моєму прикладі вище код створює disabledключ ( disabledу цьому випадку значення), коли disabledвластивість передається Helloекземпляру компонента.

Якщо ви хочете лише використовувати disabled, ця відповідь працює добре.

Ви можете передати логічне значення disabledатрибуту.

render: function() {
    return <button disabled={AppStore.cartIsEmpty()}>Clear cart</button>
}

Я використовую React 16, і це працює для мене (де bool ваш тест):

<fieldset {...(bool ? {disabled:true} : {})}>

В основному, на основі тесту (bool ) ви повертаєте об’єкт з атрибутом або повертаєте порожній об’єкт.

Крім того, якщо вам потрібно додати або опустити кілька атрибутів, ви можете зробити це:

<fieldset {...(bool ? {disabled:true} : {})} {...(bool ? {something:'123'} : {})}>

Для більш складних атрибутів, якими я управляю, я пропоную вам заздалегідь створити об’єкт з (або без) атрибутами поза JSX.

Більш чистий спосіб створення динамічних атрибутів, який працює для будь-яких атрибутів

function dynamicAttributes(attribute, value){
  var opts = {};
  if(typeof value !== 'undefined' && value !== null) {
    opts['"'+attribute+'"'] = value;
    return opts;
  }
  return false;
};

Зателефонуйте своєму компоненту реакції, як показано нижче

<ReactComponent {...dynamicAttributes("disabled",false)}
{...dynamicAttributes("data-url",dataURL)}
{...dynamicAttributes("data-modal",true)} />

Поради:

1. Ви можете мати dynamicAttributesфункцію в загальному місці / утилітах та імпортувати її, щоб використовувати її у всіх компонентах

2. ви можете передати значення, nullщоб не відображати динамічний атрибут

Ви можете знайти щось подібне до цього в документації.

https://facebook.github.io/react/docs/transferring-props.html

У вашому випадку може бути щось подібне

function MyComponent(props) {
    let { disabled, ...attrs } = props;
    if (disabled) {
        // thus, it will has the disabled attribute only if it
        // is disabled
        attrs = {
            ...attrs,
            disabled: true
        }
    };

    return (
        <button {...attrs}>MyLabel</button>
    )
}

Цей код використовує ES6, але я розумію, що у вас ідея.

Це круто, тому що ви можете передавати багато інших атрибутів цьому компоненту, і він все одно буде працювати.

Версія, якою я користувалася:

<button disabled={disabled ? 'disabled' : undefined}>
    Click me (or dont)
</button>

Простий і чистий спосіб зробити це

<button {...disabled && {disabled: true}}>Clear cart</button>

інваліди повинні надходити з таких реквізитів

<MyComponent disabled />

Набагато чистішим за прийняте рішення є рішення, про яке згадував AnilRedshift, але про яке я розповім далі.

Простіше кажучи, атрибути HTML мають ім’я та значення. Як скорочення ви можете використовувати це ім'я лише для "відключених", "кількох" і т. Д. Але довговічна версія все ще працює, і React дозволяє працювати найкращим чином.

disabled={disabled ? 'disabled' : undefined} є найбільш читабельним рішенням.

Спочатку ви можете просто перевірити

<button disabled={true}>Button 1</button>
<button disabled={false}>Button 2</button>

Примітка: ** вимкнене значення не є рядком, воно має бути логічним .

Тепер щодо динаміки. Ви можете просто писати

<button type="button" disabled={disable}  
        onClick={()=>this.setSelectValue('sms')} >{this.state.sms}</button>

Як бачите, я використовую відключене властивість, і в фігурних дужках це може бути локальна змінна / стан var. Змінна disableмістить значення true / false.

Це може спрацювати, проблема з відключеним полягає в тому, що не можна просто встановити для нього логічну форму.

if(AppStore.cartIsEmpty()){
  return "<button disabled>Clear cart</button>"
}
else
{
  return "<button>Clear cart</button>"
}