Как условно добавить атрибуты для компонентов React?
есть ли способ добавить атрибуты только к компоненту React, если выполнено определенное условие?
Я должен добавить обязательные и только для чтения атрибуты для формирования элементов на основе вызова ajax после рендеринга, но я не вижу, как это решить, так как readOnly="false" не то же самое, что полностью опустить атрибут.
приведенный ниже пример должен объяснить, что я хочу, но не будет работать (ошибка разбора: неожиданный идентификатор).
var React = require('React');
var MyOwnInput = React.createClass({
render: function () {
return (
<div>
<input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
</div>
);
}
});
module.exports = React.createClass({
getInitialState: function () {
return {
isRequired: false
}
},
componentDidMount: function () {
this.setState({
isRequired: true
});
},
render: function () {
var isRequired = this.state.isRequired;
return (
<MyOwnInput name="test" {isRequired ? "required" : ""} />
);
}
});
11 ответов
по-видимому, для некоторых атрибутов React достаточно умен, чтобы опустить атрибут, если значение, которое вы передаете ему, не является истинным. Например:
var InputComponent = React.createClass({
render: function() {
var required = true;
var disabled = false;
return (
<input type="text" disabled={disabled} required={required} />
);
}
});
в результате:
<input type="text" required data-reactid=".0.0">
просто бросая другой вариант там, но @juandemarco это ответ обычно правильный.
построить объект, как вам нравится:
var inputProps = {
value: 'foo',
onChange: this.handleChange
};
if (condition) inputProps.disabled = true;
рендеринг со спредом, при необходимости передавая другие реквизиты.
<input
value="this is overridden by inputProps"
{...inputProps}
onChange={overridesInputProps}
/>
пример использования загрузки ' s Button
via React-Bootstrap.
var condition = true;
return (
<Button {...(condition ? {bsStyle: 'success'} : {})} />
);
в зависимости от состояния, либо {bsStyle: 'success'}
или {}
будут возвращены. Затем оператор spread распространит свойства возвращаемого объекта на
опоздал на вечеринку. Вот альтернатива.
var condition = true;
var props = {
value: 'foo',
...( condition && { disabled: true } )
};
var component = <div { ...props } />;
или его встроенная версия
var condition = true;
var component = (
<div
value="foo"
{ ...( condition && { disabled: true } ) } />
);
вы можете использовать тот же ярлык, который используется для добавления / удаления (частей) компонентов ({isVisible && <SomeComponent />}
).
class MyComponent extends React.Component {
render() {
return (
<div someAttribute={someCondition && someValue} />
);
}
}
опоздал на вечеринку.
допустим, мы хотим добавить пользовательское свойство (используя aria - * или data -*), если условие истинно:
{...this.props.isTrue && {'aria-name' : 'something here'}}
допустим, мы хотим добавить свойство стиля, если условие истинно:
{...this.props.isTrue && {style : {color: 'red'}}}
Если вы используете es6, вы можете просто написать так.
// first, create a wrap object.
const wrap = {
[variableName]: true
}
// then, use it
<SomeComponent {...{wrap}} />
Это должно работать, так как ваше состояние изменится после вызова ajax, и родительский компонент повторно отобразится.
render : function () {
var item;
if (this.state.isRequired) {
item = <MyOwnInput attribute={'whatever'} />
} else {
item = <MyOwnInput />
}
return (
<div>
{item}
</div>
);
}
вот как я это делаю.
с условным:
<Label
{...{
text: label,
type,
...(tooltip && { tooltip }),
isRequired: required
}}
/>
Я по-прежнему предпочитаю использовать обычный способ передачи реквизита, потому что он более читаем (на мой взгляд) в случае отсутствия каких-либо условий.
с условным:
<Label text={label} type={type} tooltip={tooltip} isRequired={required} />
учитывая этот пост https://facebook.github.io/react/tips/if-else-in-JSX.html Вы можете решить свою проблему таким образом
if (isRequired) {
return (
<MyOwnInput name="test" required='required' />
);
}
return (
<MyOwnInput name="test" />
);
в React вы можете условно отображать компоненты, а также их атрибуты, такие как props, className, id и многое другое.
в React очень хорошая практика использовать "троичный оператор" , который может помочь вам условно визуализировать компоненты.
пример показывает также, как условно визуализировать компонент и его стиль atribute
вот простой пример :
class App extends React.Component {
state = {
isTrue: true
};
render() {
return (
<div>
{this.state.isTrue ? (
<button style={{ color: this.state.isTrue ? "red" : "blue" }}>
I am rendered if TRUE
</button>
) : (
<button>I am rendered if FALSE</button>
)}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>