Reagieren js vermeiden, div

Question

Ich habe das Problem in der Komponente Render-Funktion erzeugt es Wrapping Div beim Importieren Kind-Komponente.

geordnete Komponente Funktion machen:

render(){ 

     return(
      <Card style={styles.cardStyle}> 
      {this.getTitle(this.props.name, this.props.constraint)} 
      <CardText> 
      <Grid fluid={true}> 
       <Row> 
        <Fields key={0} obj={this.props.fields[0]} value={""} error={""} handler={this.props.handler}></Fields> 
       </Row> 
      </Grid> 
      </CardText> 
      </Card> 
     ) 
    } 

Kinder Komponente Funktion:

renderFields = (obj) =>{ 
    let des = translate(obj.description); 
    let mandatory = (obj.required == true) ? " *" : "" 
    let description = des + mandatory; 
    if(obj.variable){ 
     switch(obj.dataType){ 
     case "string": 
      return ([ 
      <Col xs={12} md={3}> 
       <TextField fullWidth={true} ref={obj.code} floatingLabelText={description} value={this.props.value} onChange={(e,newValue) => this.props.handler(newValue, obj.code, obj.required, '')} errorText={this.props.error ? this.props.error : ""}/> 
      </Col>] 
     ); 
     case "integer": 
      return (
      <Col xs={12} md={3}> 
       <TextField fullWidth={true} ref={obj.code} floatingLabelText={description} value={this.props.value} onChange={(e,newValue) => this.props.handler(newValue, obj.code, obj.required, /^[+-]?\d+$/)} errorText={this.props.error ? this.props.error : ""} /> 
      </Col> 
     ); 
     case "double": 
      return (
      <Col xs={12} md={3}> 
       <TextField fullWidth={true} ref={obj.code} floatingLabelText={description} value={this.props.value} onChange={(e,newValue) => this.props.handler(newValue, obj.code, obj.required, /^[+-]?\d+(\.\d+)?$/)} errorText={this.props.error ? this.props.error : ""}/> 
      </Col> 
     ); 
     } 
    } 
} 

render(){ 
    return (
     <div> 
     {this.renderFields(this.props.obj)} 
     </div> 
    ); 
    } 

Ich bin für das Stromnetz reagieren Bootstrap-Framework. Ich habe viele Lösungen ausprobiert, aber leider nicht für mich gearbeitet. Es erzeugt Wrapping Div Vor Kind-Komponente (Felder). Die Ausgabe sieht wie folgt:

Hilf mir, dieses Problem herauszufinden! Ich bin neu zu reagieren.

Answer 1

Ja, Sie, dass die Verpackung div vermeiden kann, Grund ist, dass Sie eine einzelne <col>....</col> so direkt zurückgeben möchten Sie es wie folgt schreiben:

render(){ 
    return this.renderFields(this.props.obj) //here no {} here 
} 

Wir brauchen, dass div Verpackung, wenn wir mehrere Elemente zurück von der Rendermethode. Fügen Sie auch return null; im letzten von renderFields hinzu, um den Fall zu behandeln, wenn die Bedingung fehlschlägt.

Vorschlag:

Da Kind-Komponente ist nicht lokale Zustand und Lifecycle-Methode verwendet, so dass Sie es als Stateless Functional Component schreiben können.

Like this:

const Child = ({obj}) => { 
    let des = translate(obj.description); 
    let mandatory = (obj.required == true) ? " *" : "" 
    let description = des + mandatory; 
    if(obj.variable){ 
     switch(obj.dataType){ 
     case "string": 
      return (
      <Col xs={12} md={3}> 
       ... 
      </Col> 
     ); 
     case "integer": 
      return (
      <Col xs={12} md={3}> 
       .... 
      </Col> 
     ); 
     case "double": 
      return (
      <Col xs={12} md={3}> 
       .... 
      </Col> 
     ); 
     } 
    } 
    return null; 
} 

Answer 2

Sie diesen Wrapper verwenden können, die ich erstellt: https://www.npmjs.com/package/react-shadow-wrapper

Mit ihm können Sie alles, was in ihm anstelle eines DIV wickeln, die Ihnen die resultierende HTML geben Sie Auf der Suche nach.