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" : ""}/>
);
}
});

Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Najwyraźniej w przypadku niektórych atrybutów React jest na tyle inteligentny, że pomija atrybut, jeśli wartość, którą mu przekazujesz, nie jest prawdziwa. Na przykład:
var InputComponent = React.createClass({
render: function() {
var required = true;
var disabled = false; return ( <input type="text" disabled={disabled} required={required}/>
);
}
});

spowoduje:
<input type="text" required>


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

Anonimowy użytkownik

Potwierdzenie od:

odpowiedź
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.
<input
value="this is overridden by inputProps"
{...inputProps}
onChange={overridesInputProps}
/>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Oto przykład użycia
Bootstrap
http://getbootstrap.com/ 's
Button
https://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
Button
. 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
props
428331
:
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ętrznego
& < Button/& >
będzie miał klucz
bsStyle
o wartości
undefined
.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Oto alternatywa.
var condition = true;var props = {
value: 'foo',
...( condition && { disabled: true } )
};var component = <div { ...props }/>;

Lub jego wersja inline
var condition = true;var component = ( <div
value="foo"
{ ...( condition && { disabled: true } ) }/>);
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Tak to robię.

Z warunkowym

Przeznaczenie:
<Label
{...{
text: label,
type,
...(tooltip && { tooltip }),
isRequired: required
}}
/>

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

Anonimowy użytkownik

Potwierdzenie od:

Powiedzmy, że chcemy dodać właściwość niestandardową (używając aria- * lub data- *), jeśli warunek jest prawdziwy:
{...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

Anonimowy użytkownik

Potwierdzenie od:

Możesz użyć tego samego skrótu, który jest używany do dodawania/usuwania (części) komponentów (
{isVisible & amp; & amp; & < SomeComponent/& >}
).
class MyComponent extends React.Component {
render() {
return ( <div someAttribute={someCondition && someValue}/>
);
}
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jeśli używasz ECMAScript 6, możesz po prostu napisać w ten sposób.
// First, create a wrap object.
const wrap = {
[variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}}/>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Powinno to działać, ponieważ stan zmieni się po wywołaniu Ajax, a komponent nadrzędny zostanie ponownie renderowany.
render : function () {
var item;
if (this.state.isRequired) {
item = <MyOwnInput attribute={'whatever'}/>
} else {
item = <MyOwnInput/>
}
return ( <div>
{item}

);
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

W Reakcie możesz warunkowo renderować komponenty, ale także ich atrybuty, takie jak właściwości, nazwa klasy, id i inne.
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">
<script src="[url=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>]https://cdnjs.cloudflare.com/a ... gt%3B[/url]
<script src="[url=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div]https://cdnjs.cloudflare.com/a ... 3Bdiv[/url] id="root">
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Biorąc pod uwagę post
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

Anonimowy użytkownik

Potwierdzenie od:

Na przykład używanie stylów właściwości dla niestandardowego kontenera
const DriverSelector = props => {
const Container = props.container;
const otherProps = {
...( props.containerStyles && { style: props.containerStyles } )
}; return ( <Container {...otherProps} >

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się