时间戳

首页 > 解决方案 > 为什么尝试在变量中渲染组件时会出错？

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

问题描述

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

  {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>
    );
  })}

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

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

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

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

警告：React.createElement: type is invalid - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：。您是否不小心导出了 JSX 文字而不是组件？

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

标签： reactjs

解决方案

我希望你item.component是调用的结果getCustomComponent()。在这里您需要注意getCustomComponent返回一个对象而不是functionor 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>
);

但这并不能完全解决您的问题。您需要通过的道具现在没有通过（如果item.Component在场）。因此，您可能需要查看React.cloneElement. 您可以在此处阅读有关它的信息https://reactjs.org/docs/react-api.html#cloneelement和一些在线示例，说明如何将道具传递给您item.Component并呈现相同的内容。

推荐阅读