javascript - react - Reaccionar: en línea condicionalmente pasar prop a componente

react js css class

Question

Me gustaría saber si hay una mejor manera de aprobar condicionalmente una propuesta que usando una sentencia if.

Por ejemplo, ahora mismo tengo:

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    if(this.props.editable) {
      return (
        <Child editable={this.props.editableOpts} />
      );
    } else {
      // In this case, Child will use the editableOpts from its own getDefaultProps()
      return (
        <Child />
      );
    }
  }
});

¿Hay una manera de escribir esto sin la sentencia if? Estoy pensando en algo parecido a un tipo de instrucción inline-if en el JSX:

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    return (
      <Child 
        {this.props.editable ? editable={this.props.editableOpts} : null} 
      />
    );
  }
});

Para concluir: estoy tratando de encontrar una manera de definir un pilar para el Child , pero pasar un valor (o hacer otra cosa) para que el Child todavía getDefaultProps() el valor del pilar de los propios getDefaultProps() del Child .

Answer 1

Definir la variable props :

let props = {};
if (this.props.editable){
  props.editable = this.props.editable;
}

Y luego usarlo en JSX:

<Child {...props} />

Aquí hay una solución en su código:

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    let props = {};
    if (this.props.editable){
      props.editable = this.props.editable;
    }
    return (
      <Child {...props} />
    );
  }
});

Fuente, Reactuar documentación: https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

Answer 2

Estuviste cerca de tu idea. Resulta que pasar undefined para un prop es lo mismo que no incluirlo en absoluto, lo que aún activará el valor de prop predeterminado. Así que podrías hacer algo como esto:

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    return <Child 
      editable={this.props.editable ?
                  this.props.editableOpts : 
                  undefined}
    />;
  }
});

Answer 3

agregar un operador de propagación a this.props.editable

<Child {...this.props.editable ? editable={this.props.editableOpts} : null} >

Deberia trabajar

Answer 4

const CleaningItem = ({ disabled = false }) => (
 <View
     style={[styles.container, disabled && styles.disabled]}
     pointerEvents={disabled ? ''none'' : ''auto''}
 >
     <Button
         disabled={disabled || null}
         title="SELECT"
     />
 </View>
);