在我的react类上,我尝试将Row组件添加到列表中,以便以后需要列出一些东西时使用。它返回我该错误:
Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it
在另一个项目中,我具有相同的功能,但工作原理有所不同。
我将WebPack和reactstrap
用于行。
我的课
import React, { Component } from 'react';
import {Row, Col, Container} from 'reactstrap';
class Test extends Component {
constructor(props) {
super(props);
this.insert = this.insert.bind(this);
}
insert() {
var list = [];
list.push(
<Row>
<Col>
<p>Test data</p>
</Col>
</Row>);
return {list};
}
render() {
return (
<div>
<Container>
{this.insert}
</Container>
</div>
);
}
}
export default Test;
答案 0 :(得分:1)
您可以尝试
import React, { Component } from "react";
import { Row, Col, Container } from "reactstrap";
class MyComponent extends Component {
insert() {
var list = [];
list.push(
<Row>
<Col>
<p>Test data</p>
</Col>
</Row>
);
return list;
}
render() {
return (
<div>
<Container>{this.insert()}</Container>
</div>
);
}
}
export default MyComponent;