反应js避免包装div
我有组件渲染功能的问题，它导入子组件时生成包装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）之前。 输出如下所示：
帮我弄清楚这个问题！ 我是新来的反应。
是的，你可以避免包装div，原因是你想返回一个<col>....</col>所以你可以直接写下来：
render(){
return this.renderFields(this.props.obj) //here no {} here
}
当我们有多个元素从渲染方法返回时，我们需要包装div。 同时添加return null; 在renderFields的最后处理情况，如果条件失败。
建议：
由于子组件不使用本地状态和生命周期方法，因此您可以将其编写为无状态功能组件。
喜欢这个：
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;
}
你可以使用我创建的这个包装器：https：//www.npmjs.com/package/react-shadow-wrapper
有了它，你可以把所有东西都包装进去，而不是一个DIV，它会给你所寻找的HTML。
链接地址: http://www.djcxy.com/p/52165.html