Динамический атрибут в ReactJS
Я хочу динамически включить / опустить атрибут disabled в элементе button. Я видел много примеров динамических атрибутов, но не самих атрибутов. У меня есть следующая функция рендеринга:
render: function() {
var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
return <button {maybeDisabled}>Clear cart</button>
}
это вызывает ошибку синтаксического анализа из-за символа" {". Как включить / опустить отключенный атрибут на основе (логического) результата AppStore.cartIsEmpty()?
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
, однако,этой ответ хорошо работает.
Я использую React 16, и это работает для меня (где bool
ваш тест):
<fieldset {...(bool ? {disabled:true} : {})}>
в основном, на основе тестирования (bool
) вы возвращаете объект с атрибутом или возвращаете пустой объект.
кроме того, если вам нужно добавить или опустить несколько атрибутов, вы можете сделать это:
<fieldset {...(bool ? {disabled:true} : {})} {...(bool ? {something:'123'} : {})}>
для более сложного управляемого атрибута я предлагаю вам prefab объект с (или без) атрибутов вне JSX.
более чистый способ выполнения динамических атрибутов, который работает для любых атрибутов, -
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
чтобы не отображать динамический атрибут
вы можете найти что-то подобное этому в документации.
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>
Это может работать, проблема с отключенным не может просто установить логическое значение для него.
if(AppStore.cartIsEmpty()){
return "<button disabled>Clear cart</button>"
}
else
{
return "<button>Clear cart</button>"
}