Динамический атрибут в ReactJS

Я хочу динамически включать / опускать атрибут disabled в элементе кнопки. Я видел множество примеров значений динамических атрибутов, но не самих атрибутов. У меня есть следующая функция рендеринга:

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} : {})}>

По сути, на основе test ( 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чтобы не отображать динамический атрибут

Намного чище, чем принятое решение, это решение, о котором упоминал AnilRedshift, но которое я расширю.

Проще говоря, атрибуты HTML имеют имя и значение. В сокращении вы можете использовать это имя только для «отключен», «несколько» и т. Д. Но полная версия все еще работает и позволяет React работать предпочтительным образом.

disabled={disabled ? 'disabled' : undefined} это наиболее разборчивое решение.

Я использовал следующую версию:

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

Вы можете найти что-то подобное в документации.

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: true}}>Clear cart</button>

отключен должен исходить от такого реквизита

<MyComponent disabled />

Сначала вы можете просто проверить

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

Примечание: ** значение disabled не является String, оно должно быть логическим .

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

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

Как видите, я использую свойство disabled, и в фигурных скобках это может быть локальная переменная / переменная состояния. Переменная disableсодержит значения true / false.

Это может сработать, проблема с disabled в том, что для него нельзя просто установить логическое значение.

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