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

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

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

Это вызывает ошибку синтаксического анализа из-за символа "{". Как включить/исключить отключенный атрибут на основе (логического) результата AppStore.cartIsEmpty()?

Ответ 1

Самый чистый способ добавления дополнительных атрибутов (включая 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, но этот ответ хорошо работает.

Ответ 2

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

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

Ответ 3

Я использую React 16, и это работает для меня (где bool - ваш тест):

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

В принципе, на основе теста (bool) вы возвращаете объект с атрибутом или возвращаете пустой объект.

Кроме того, если вам нужно добавить или опустить несколько атрибутов, вы можете сделать это:

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

Для более продуманного атрибута я предлагаю вам предварительно создать объект с (или без) атрибутами вне JSX.

Ответ 4

Более чистый способ динамических атрибутов, который работает для любых атрибутов,

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)} />

Советы:

У вас может быть функция dynamicAttributes в общем месте/утилитах и импортировать его, чтобы использовать его во всех компонентах.
вы можете передать значение как null, чтобы не отображать динамический атрибут

Ответ 5

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

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, но я понял, что у вас есть идея.

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

Ответ 6

Версия, которую я использовал, была:

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

Ответ 7

Решение, о котором упоминал AnilRedshift, гораздо более чистое, чем принятое решение, но которое я более подробно остановлюсь.

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

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

Ответ 8

Простой и чистый способ сделать это

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

инвалиды должны прийти из реквизита, как это

<MyComponent disabled />

Ответ 9

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

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