为什么渲染时会出现错误？

Question

我在我的项目中使用 react-highcharts。我想动态生成图表组件并根据用户的选择更改它们的数量。我编写了组件和函数来获取数据并制作 highcharts 组件数组和 returns 它们：

export default class ContentChartItem extends Component {

    constructor(props) {
        super(props);
        this.state = {
        }

        this.config = {}

    render() {
        let { process_data } = this.props;
        let config = this.config;

        return (
            <div className="column">
                {typeof process_data == "undefined" ? " "
                    :
                    <div className="ui segment">
                        {this.getChartItemsList}
                        <div className="ui button tiny fluid sidenav4">
                            Info
                        </div>
                    </div>
                }
            </div>
        )
    }

    getChartItemsList = () => {
        let config = this.config;
        let { process_data } = this.props;
        let chartContainers = [];
        for ( let i=0; i<process_data.length; i++ ) {
            chartContainers.push( <ReactHighcharts config = {config}> </ReactHighcharts> )
        }

        return chartContainers;
    };


}

在渲染过程中出现错误：

Warning: 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.

可能是什么原因？我该如何解决。

Answer 1

您忘记拨打this.getChartItemsList():

{typeof process_data == "undefined" ? " "
                    :
                    <div className="ui segment">
                        {this.getChartItemsList()}
                        <div className="ui button tiny fluid sidenav4">
                            Info
                        </div>
                    </div>
                }

顺便说一句，您可以使用以下语法来执行条件：

{
  process_data && (
  <div className="ui segment">
    {this.getChartItemsList()}
    <div className="ui button tiny fluid sidenav4">
      Info
    </div>
  </div>
)}

为什么渲染时会出现错误？

Why mistake appears during render?

javascript

reactjs

highcharts

react-highcharts