javascript - practicas - ¿Cómo agregar atributos condicionalmente a los componentes React?

react js

Question

¿Hay alguna manera de agregar solo atributos a un componente Reaccionar si se cumple una determinada condición?

Se supone que debo agregar los atributos obligatorios y readOnly para formar elementos basados ​​en una llamada ajax después del render, pero no puedo ver cómo resolver esto ya que readOnly = "false" no es lo mismo que omitir el atributo por completo.

El siguiente ejemplo debería explicar lo que quiero, pero no funcionará (Error de análisis: identificador inesperado).

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

Answer 1

Aparentemente, para ciertos atributos, React es lo suficientemente inteligente como para omitir el atributo si el valor que le pasas no es verdadero. Por ejemplo:

var InputComponent = React.createClass({
render: function() {
var required = true;
var disabled = false;
return (
<input type="text" disabled={disabled} required={required} />
);
}
});

resultará en:

<input type="text" required data-reactid=".0.0">

Answer 2

Aquí hay un ejemplo del uso del Button Bootstrap a través de React-Bootstrap (versión: 0.32.4).

var condition = true;
return (
<Button {...(condition ? {bsStyle: ''success''} : {})} />
);

Dependiendo de la condición, se {bsStyle: ''success''} o {} . El operador de propagación extenderá las propiedades del objeto devuelto al componente Button . En el caso falso, dado que no existen propiedades en el objeto devuelto, no se pasará nada al componente.

Forma alternativa basada en el comentario de @Andy Polhill a continuación:

var condition = true;
return (
<Button bsStyle={condition ? ''success'' : undefined} />
);

La única pequeña diferencia es que en el segundo ejemplo, el objeto de accesorios del <Button/> tendrá una clave bsStyle con valor de undefined .

Answer 3

Aquí hay una forma en que lo hago.

con condicional :

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

Todavía prefiero usar la forma regular de pasar accesorios porque es más legible (en mi opinión) en el caso de que no tenga ningún tipo de condicionales.

sin Condicional :

 <Label text={label} type={type} tooltip={tooltip} isRequired={required} />

Answer 4

En React puedes renderizar componentes condicionalmente, pero también sus atributos como accesorios, className, id y más.

En React, es una muy buena práctica usar el "operador ternario" que puede ayudarlo a procesar componentes condicionalmente.

El ejemplo muestra también cómo renderizar condicionalmente Component y su atributo de estilo

Aquí hay un ejemplo simple:

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>

Answer 5

Esto debería funcionar, ya que su estado cambiará después de la llamada ajax, y el componente padre se volverá a procesar.

render : function () {
var item;
if (this.state.isRequired) {
item = <MyOwnInput attribute={''whatever''} />
} else {
item = <MyOwnInput />
}
return (
<div>
{item}
</div>
);
}

Answer 6

Puede usar el mismo acceso directo, que se usa para agregar / eliminar (partes de) componentes ( {isVisible && <SomeComponent />} ).

class MyComponent extends React.Component {
render() {
return (
<div someAttribute={someCondition && someValue} />
);
}
}

Answer 7

Si usa es6, simplemente puede escribir así.

// first, create a wrap object.
const wrap = {
[variableName]: true
}
// then, use it
<SomeComponent {...{wrap}} />

Answer 8

Simplemente lanzo otra opción, pero la respuesta de @ juandemarco suele ser correcta.

Construye un objeto como quieras:

var inputProps = {
value: ''foo'',
onChange: this.handleChange
};
if (condition) inputProps.disabled = true;

Render con extensión, opcionalmente pasando otros accesorios también.

<input
value="this is overridden by inputProps"
{...inputProps}
onChange={overridesInputProps}
/>

Answer 9

Tarde a la fiesta. Aquí hay una alternativa.

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

O su versión en línea

var condition = true;
var component = (
<div
value="foo"
{ ...( condition && { disabled: true } ) } />
);

Answer 10

Tarde a la fiesta.

Digamos que queremos agregar una propiedad personalizada (usando aria- * o data- *) si una condición es verdadera:

{...this.props.isTrue && {''aria-name'' : ''something here''}}

Digamos que queremos agregar una propiedad de estilo si una condición es verdadera:

{...this.props.isTrue && {style : {color: ''red''}}}

Answer 11

Teniendo en cuenta esta publicación JSX In Depth , puede resolver su problema de esta manera

if (isRequired) {
return (
<MyOwnInput name="test" required=''required'' />
);
}
return (
<MyOwnInput name="test" />
);