Question

我有一个演示组件，我想渲染一个基于类的组件，但我不想将它导入演示组件，我想将它作为属性传递。那可能吗？有更好的方法吗？

以下是我如何在其容器中呈现演示组件，它的名称是TodaysRevenueThumbnail：

renderTodaysRevenueThumbnail() {

        if (!this.props.todaysTotalRevenue || !this.props.todaysSales) {
            return <h1>Loading...</h1>;
        } else {
            return (
                <TodaysRevenueThumbnail
                    totalRevenue={this.props.todaysTotalRevenue}
                    sales={this.props.todaysSales}
                    name={"Today's"}
                    ChartComponent={<TodaysRevenueChart/>}
                />
            );
        }
    }

你可以看到我试图传递一个名为TodaysRevenueChart的另一个组件的实例。

以下是我尝试在TodaysRevenueThumbnail中呈现TodaysRevenueChart的方法：

import React, {Component} from 'react';

const TodaysRevenueThumbnail = ({totalRevenue, sales, name, ChartComponent}) => {

  return (
    <div className="revenueThumbnail">
      <div className="col-lg-12 col-md-12" >
        <div className="thumbnail">
          <ChartComponent todaysSales={sales} />
          <div className="caption">
            <h3>{name} Total Revenue: ${totalRevenue}</h3>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TodaysRevenueThumbnail;

我在控制台中收到错误消息：

＆＃34; invariant.js：38Uncaught（在promise中）错误：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。检查TodaysRevenueThumbnail＆＃34;

的渲染方法

Answer 1

不是传递渲染的实例，而是传递组件构造函数：

<TodaysRevenueThumbnail
    totalRevenue={this.props.todaysTotalRevenue}
    sales={this.props.todaysSales}
    name={"Today's"}
    ChartComponent={TodaysRevenueChart}
/>

Answer 2

将其作为ChartComponent={TodaysRevenueChart}传递，它应该有效。

了解jsx喜欢

<TodaysRevenueChart foo="bar" />

大致转变为

{ type: TodaysRevenueChart, props: { foo: 'bar' } }

这就是反应期望从渲染返回的形状，它知道如何处理。从某种意义上说，jsx是一种方便的方法，可以使看起来就像你正在执行你的组件一样，实际上你正在履行这个责任做出反应。

我可以将基于类的组件的表示组件作为属性传递并使表示组件呈现它吗？

2 个答案: