Question

如何渲染作为道具传递的StyledComponent？

我正在将Spinner组件传递给我的BarComponent作为渲染的道具。在以下示例中，我尝试在{this.props.icon}中使用BarComponent，但是却给了我一个错误：

对象作为React子对象无效（找到：带有键{$$ typeof，render，attrs，componentStyle，displayName，foldedComponentIds，styledComponentId，target，withComponent，warnTooManyClasses，toString}的对象）。如果要渲染子级集合，请改用数组。

我该如何解决？

import React, { Component } from 'react';
import { StyledIcon } from 'styled-icons';
import { Spinner } from 'styled-icons/fa-solid';

interface BarComponentProps {
  icon: StyledIcon,
  name: string
}

class BarComponent extends Component<BarComponentProps> {
  render() {
    return (
      // How to render a StyledComponent passed in as a prop?
      // In this example it should result in something like:
      // <div><Spinner /> - {this.props.name}</div>
      <div>{this.props.icon} - {this.props.name}</div>
    );
  }
}

class FooComponent extends Component {
  render() {
    return <BarComponent icon={Spinner} name='Baz' />;
  }
}

Answer 1

不传递类名，而是传递组件：

class FooComponent extends Component {
  render() {
    return <BarComponent icon={<Spinner />} name='Baz' />;
  }
}

这是构图模式。

如果您甚至只传递类名（用React.createElement处理），在需要提供其他道具（例如参数或style）的情况下，它就不会很有用。因此，这里的组合更加灵活

Answer 2

尝试将其作为孩子传递。

<BarComponent name='Baz' >
<Spinner />
</BarComponent>

class BarComponent extends Component<BarComponentProps> {
 render() {
  return (
  // How to render a StyledComponent passed in as a prop?
  // In this example it should result in something like:
  // <div><Spinner /> - {this.props.name}</div>
  <div>{this.props.children} - {this.props.name}</div>
);
}
}

Answer 3

您可以使用createElement()，如下所示：

<div>{React.createElement(this.props.icon)} - {this.props.name}</div>

渲染作为属性传入的组件

3 个答案: