React jsが折り返しを避ける

Question

コンポーネントのレンダリング機能で、子コンポーネントを読み込み中に折り返しdivが生成されるという問題があります。私は、グリッドのためのブートストラップのフレームワークを使用しています反応

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

：

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

子コンポーネント機能：コンポーネントの機能をレンダリング

親。私は多くの解決策を試しましたが、残念なことに私のために働かなかったのです。それは子コンポーネント（フィールド）の前に折り返しdivを生成しています。出力は以下のようになります。

私はこの問題を把握助けて！私は反応するのが新しい。

Answer 1

はい、あなたはそのラッピングのdivを避けることができ、その理由は、あなたがこのようにそれを書くことができますので、直接単一<col>....</col>を返すようにしたいです：

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

は、我々が必要とする、我々は返すように複数の要素を持っているdiv要素を包みますレンダリングメソッドから。また、条件が満たされなかった場合には、の最後にreturn null;を追加してケースを処理します。

提案：

子コンポーネントには、ローカルの状態とライフサイクルメソッドを使用していないので、あなたがStateless Functional Componentとしてそれを書くことができます。

このよう

：あなたは、私が作成したこのラッパーを使用することができます

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

：それをhttps://www.npmjs.com/package/react-shadow-wrapper

を、あなたの代わりにあなたがしている結果のHTMLを与えるDIVのそれですべてをラップすることができます探している。