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之前的子组件（字段）。输出如下所示：

帮我解决这个问题！我很反应。

Answer 1

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

Answer 2

您可以使用我创建的此包装器：https://www.npmjs.com/package/react-shadow-wrapper

有了它，您可以将所有内容包装在其中，而不是DIV，它将为您提供您正在寻找的结果HTML。

React js避免包装div

2 个答案: