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:
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:
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):
W zależności od warunku zostanie zwrócony albo , 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 ... 14168 428331
:
Jedyna niewielka różnica polega na tym, że w drugim przykładzie obiekt _35 komponentu wewnętrznego będzie miał klucz o wartości .
Anonimowy użytkownik
Potwierdzenie od:
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:
Anonimowy użytkownik
Potwierdzenie od:
Powiedzmy, że chcemy dodać właściwość style, jeśli warunek jest prawdziwy:
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
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">
<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:
Anonimowy użytkownik
Potwierdzenie od: