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

Question

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

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

render: function() {

    var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";

    return <button {maybeDisabled}>Clear cart</button>

}

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

684 7

reactjs

7 ответов:

Comments

Ничего не найдено.

WiredPrairie · Accepted Answer · 2017-05-23 15:10:06

самый чистый способ, чтобы добавить дополнительные атрибуты (в том числе disabled и другие, которые вы можете использовать) в настоящее время использовать JSX spread attributes:
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, однако,этой ответ хорошо работает.

Alexandre Kirszenberg · Accepted Answer · 2015-03-17 17:39:58

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

Luke · Accepted Answer · 2017-11-22 04:42:07

Я использую React 16, и это работает для меня (где bool ваш тест):
<fieldset {...(bool ? {disabled:true} : {})}>
в основном, на основе тестирования (bool) вы возвращаете объект с атрибутом или возвращаете пустой объект.

кроме того, если вам нужно добавить или опустить несколько атрибутов, вы можете сделать это:
<fieldset {...(bool ? {disabled:true} : {})} {...(bool ? {something:'123'} : {})}>
для более сложного атрибута управляемого я предлагаю вам префаб объекта с (или без) атрибутов за пределами JSX.

Venkat Reddy · Accepted Answer · 2017-05-10 21:08:23

более чистый способ выполнения динамических атрибутов, который работает для любых атрибутов
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)} />
советы :

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

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

user3552712 · Accepted Answer · 2016-09-17 08:08:43

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

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

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

AnilRedshift · Accepted Answer · 2018-03-09 05:00:32

версия, которую я использовал, была:
<button disabled={disabled ? 'disabled' : undefined}>
    Click me (or dont)
</button>

IcyBright · Accepted Answer · 2015-03-17 17:38:11

Это может работать, проблема с отключенным не может просто установить логическое значение для него.
if(AppStore.cartIsEmpty()){
  return "<button disabled>Clear cart</button>"
}
else
{
  return "<button>Clear cart</button>"
}