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