reactjs - 为什么在尝试渲染变量中的组件时会出错？

Question

我有一种情况，我想呈现一个默认组件，除非在对象中传递了一个不同的组件。

  {map(changes, item => {
    const hasChanged = item.fromValue !== item.toValue;
    const Component = item.Component;

    return (
      <div key={uuid.v4()} className="row">
        <div className="col-md-6">
          {Component ? (
            <Component
              key={uuid.v4()}
              labelColor={hasChanged ? '#AB2912' : ''}
              backgroundColor={hasChanged ? '#FFEE7E' : ''}
              shouldBoldValue={hasChanged}
              label={item.label}
              cssClasses="preview-item-padding"
              capitalize={false} />
          ) : (
              <SimpleLabelText
                key={uuid.v4()}
                labelColor={hasChanged ? '#AB2912' : ''}
                backgroundColor={hasChanged ? '#FFEE7E' : ''}
                shouldBoldValue={hasChanged}
                label={item.label}
                text={item.toValue}
                cssClasses="preview-item-padding"
                capitalize={false} />
            )}

        </div>
      </div>
    );
  })}

在上面的代码中，除非 item 对象具有 Component 属性，否则我想呈现 SimpleLabelText。 Component 是在不同文件中创建的 jsx 标记。

我认为这不重要，但这是在另一个文件中创建标签的函数(这是临时的，我稍后会添加东西)

function getCustomComponent(text) {
  return (
    <SimpleLabelText
      text='something'
    />
  );
}

但是，当我运行它时，整个事情发生了爆炸，我收到了这条错误消息；

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: . Did you accidentally export a JSX literal instead of a component?

如何正确呈现分配给 Component 的 jxg 标签？

Answer 1

希望你的item.component是调用 getCustomComponent() 的结果.这里需要注意getCustomComponent返回一个对象而不是 function或 class .所以你必须像{item.Component}一样直接渲染它而不是使用这个 -> < />符号。

牢记这一点，您的代码将转换为如下所示。

 return (
  <div key={uuid.v4()} className="row">
    <div className="col-md-6">
      { item.Component ? item.Component : (
          <SimpleLabelText
            key={uuid.v4()}
            labelColor={hasChanged ? '#AB2912' : ''}
            backgroundColor={hasChanged ? '#FFEE7E' : ''}
            shouldBoldValue={hasChanged}
            label={item.label}
            text={item.toValue}
            cssClasses="preview-item-padding"
            capitalize={false} />
        )}

    </div>
  </div>
);

但这并不能完全解决你的问题。您需要传递的 Prop 现在没有传递(如果存在 item.Component)。所以你可能需要看看 React.cloneElement .您可以在这里阅读 https://reactjs.org/docs/react-api.html#cloneelement以及一些在线示例，说明如何将您的 Prop 传递给您的 item.Component并呈现相同的内容。