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

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

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

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

65
reactjs

7 ответов

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

124

Вы можете пройти boolean к

38

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

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

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

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

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

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

7

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

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

вызовите свой компонент react, как следующий

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

советы :

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

  2. вы можете передать значение как null чтобы не отображать динамический атрибут

3

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

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

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

1

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

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

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

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