React js avoid wrapping div

I have the problem in component render function it's generating wrapping div while importing child component.

Parent Component render function:

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

Child component function:

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

I'm using react bootstrap framework for the grid. I tried many solutions but unfortunately didn't work for me. It's generating wrapping div Before child component (Fields). The output looks like below :

Help me figure out this issue! I'm new to react.

---

Yes, you can avoid that wrapping div, reason is you want to return a single <col>....</col> so directly you can write it like this:

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

We need that wrapping div when we have multiple elements to return from render method. Also add return null; in the last of renderFields to handle the case when if condition fails.

Suggestion:

Since child component is not using local state and lifecycle method so you can write it as Stateless Functional Component.

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

---

You can use this wrapper that I created: https://www.npmjs.com/package/react-shadow-wrapper

With it, you can wrap everything in it instead of a DIV which will give you the resulting HTML you are looking for.

链接地址: http://www.djcxy.com/p/52166.html

上一篇: REDX教程：儿童从哪里来

下一篇: 反应js避免包装div