React js避免包裝div

Question

我有問題在組件渲染功能它導入子組件時生成包裝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> 
     ) 
    } 

子組件功能：

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

我使用的反應引導框架網格。我嘗試了很多解決方案，但不幸的是沒有爲我工作。它生成包裝div在子組件（Fields）之前。輸出看起來象下面這樣：

幫我找出這個問題！我是新來的反應。

Answer 1

是的，你能夠避免包裝DIV，原因是你要這麼直接返回一個<col>....</col>你可以寫這樣的：

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

我們需要一個包裹，當我們有多個元素返回DIV從渲染方法。如果條件失敗，還要在renderFields的最後加上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

有了它，你可以在它包裹的，而不是一個DIV一切，這將給你生成的HTML你尋找。