反应：无法获取组件列表答案

【问题标题】：React: Can't get a list of component反应：无法获取组件列表
【发布时间】：2019-04-24 21:33:38
【问题描述】：

在我的 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 作为 Row。

我的班级

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;

【问题讨论】：

标签： reactjs webpack reactstrap

【解决方案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;

https://codesandbox.io/embed/j2pm2q1499

【讨论】：