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你寻找。