Reaccionar: en línea condicionalmente pasar prop al componente

Me gustaría saber si hay una mejor manera de pasar un accesorio condicionalmente que usar una declaración 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 alguna forma de escribir esto sin la declaración if? Estaba pensando en algo parecido a un tipo de declaración en línea 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 prop para Child, pero pasar un valor (o hacer algo más) de modo que Childaún extraiga el valor de ese prop del Childpropio getDefaultProps().

Estuviste cerca de tu idea. Resulta que pasar undefinedpor un accesorio es lo mismo que no incluirlo en absoluto, lo que aún activará el valor de accesorio predeterminado. Entonces 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}
    />;
  }
});

Agregue un operador de propagación a this.props.editable:

<Child {...(this.props.editable ? {editable: {this.props.editableOpts}} : {})} >

Deberia trabajar.

Definir propsvariable:

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

Y luego úselo 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, documentación de React: https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

En realidad, si su prop es booleano, no es necesario implementar la condición, pero si desea agregar prop por condición en línea, debe escribir como se muestra a continuación:

const { editable, editableOpts } = this.props;
return (
  <Child {...(editable && { editable: editableOpts } )} />
);

Espero que no te confunda. el {...medio es operador extendido como pasar apoyos existentes: {...props}y el editable &&medio si editablees trueel { editable: editableOpts }objeto hará y con {...crearemos un nuevo objeto como este: {...{ editable: editableOpts }}eso significa editable={editableOpts}pero si this.porps.editablees verdadero.

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

Esto pasa los apoyos si están definidos. De lo contrario, los accesorios no se pasan. En las otras respuestas, los accesorios todavía se pasan, pero el valor es undefinedque aún significa que se están pasando los accesorios.

también puedes probar esta forma corta

 <Child {...(this.props.editable  && { editable: this.props.editableOpts })} />