Jak warunkowo dodawać atrybuty do komponentów Reacta?
Czy istnieje sposób na dodanie atrybutów do komponentu React tylko wtedy, gdy zostanie spełniony określony warunek?
Muszę dodać wymagane i readOnly atrybuty, aby renderować elementy oparte na wywołaniu Ajax po renderowaniu, ale nie widzę, jak to rozwiązać, ponieważ readOnly = "false" to nie to samo, co całkowite pominięcie atrybutu.
Poniższy przykład powinien wyjaśnić, czego chcę, ale to nie zadziała (błąd analizy: nieoczekiwany identyfikator).
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}/>
);
}
});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" : ""}/>
);
}
});Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
12 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
var InputComponent = React.createClass({render: function() {
var required = true;
var disabled = false; return ( <input type="text" disabled={disabled} required={required}/>
);
}
});
spowoduje:
Aktualizacja:
jeśli ktoś się zastanawia jak/dlaczego tak się dzieje, szczegółowe informacje można znaleźć w kodzie źródłowym ReactDOM, w szczególności w wierszach
30
https://github.com/facebook/re ... 23L30
i
167
https://github.com/facebook/re ... 3L167
plik DOMProperty.js.
Anonimowy użytkownik
Potwierdzenie od:
https://coderoad.ru/31163693/
Juandemarco ma zwykle rację, ale jest inna opcja.
Zbuduj obiekt tak, jak lubisz:
var inputProps = {value: 'foo',
onChange: this.handleChange
};if (condition)
inputProps.disabled = true;
Renderowanie z rozkładem, opcjonalnie z przekazaniem innych szczegółów.
Anonimowy użytkownik
Potwierdzenie od:
Bootstrap
http://getbootstrap.com/ 'shttps://react-bootstrap.github ... ttons
przez
React-Bootstrap
http://react-bootstrap.github.io(wersja 0.32.4):
var condition = true;return ( <Button {...(condition ? {bsStyle: 'success'} : {})}/>);W zależności od warunku zostanie zwrócony albo
{bsStyle: 'success'}, albo{}. Operator spreadu rozłoży następnie właściwości zwróconego obiektu na komponent. W przeciwnym razie, ponieważ dla zwróconego obiektu nie istnieją żadne właściwości, nic nie zostanie przekazane do komponentu.Alternatywny sposób oparty na
Komentarze Andy'ego Polhilla
https://stackoverflow.com/ques ... 14168428331
:
var condition = true;return ( <Button bsStyle={condition ? 'success' : undefined}/>);Jedyna niewielka różnica polega na tym, że w drugim przykładzie obiekt _35 komponentu wewnętrznegobędzie miał kluczo wartości.
Anonimowy użytkownik
Potwierdzenie od:
var condition = true;var props = {value: 'foo',
...( condition && { disabled: true } )
};var component = <div { ...props }/>;
Lub jego wersja inline
Anonimowy użytkownik
Potwierdzenie od:
Z warunkowym
Przeznaczenie:
Nadal wolę używać normalnego sposobu przekazywania rekwizytów w dół, ponieważ jest on bardziej czytelny (moim zdaniem) przy braku jakichkolwiek konwencji.
Bez warunku
oznaczenia:
<Label text={label} type={type} tooltip={tooltip} isRequired={required}/>Anonimowy użytkownik
Potwierdzenie od:
{...this.props.isTrue && {'aria-name' : 'something here'}}Powiedzmy, że chcemy dodać właściwość style, jeśli warunek jest prawdziwy:
{...this.props.isTrue && {style : {color: 'red'}}}Anonimowy użytkownik
Potwierdzenie od:
{isVisible & amp; & amp; & < SomeComponent/& >}).class MyComponent extends React.Component {render() {
return ( <div someAttribute={someCondition && someValue}/>
);
}
}
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
render : function () {
var item;
if (this.state.isRequired) {
item = <MyOwnInput attribute={'whatever'}/>
} else {
item = <MyOwnInput/>
}
return ( <div>
{item}
);
}
Anonimowy użytkownik
Potwierdzenie od:
W React jest bardzo dobry w użyciu
operator trójskładnikowy
https://en.wikipedia.org/wiki/ ... ience
co może pomóc w warunkowym renderowaniu komponentów.
Przykład pokazuje również, jak warunkowo renderować komponent i jego atrybut stylu.
Oto prosty przykład:
<div class="snippet-code">
<div class="snippet" data-babel="true" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">
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>
)}
);
}
}ReactDOM.render(<App/>, document.getElementById("root"));
<pre class="snippet-code-html lang-html prettyprint-override">
Anonimowy użytkownik
Potwierdzenie od:
Dogłębnie JSX
https://facebook.github.io/rea ... .html
duszo, możesz rozwiązać swój problem w ten sposób:
if (isRequired) {return ( <MyOwnInput name="test" required='required'/>
);
}
return ( <MyOwnInput name="test"/>);
Anonimowy użytkownik
Potwierdzenie od:
const DriverSelector = props => {const Container = props.container;
const otherProps = {
...( props.containerStyles && { style: props.containerStyles } )
}; return ( <Container {...otherProps} >