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

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

我认为这无关紧要，但这是在另一个文件中创建标记的函数（这是临时的，稍后我将向其添加内容）

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

但是，当我运行此命令时，整个过程都会爆炸，并且会显示此错误消息；

警告：React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：。您是否意外导出了JSX文字而不是组件？

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

Answer 1

尝试一下

{ () => (Component ? <Component /> : <SimpleLabelText />) }

为简洁起见缩写。方括号的内部必须是一个返回组件的函数。导致此错误消息的另一个主要问题是来自您的导入语句，因此也请包括在内。

Answer 2

我希望您的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>
);

但这不能完全解决您的问题。您需要通过的道具现在没有通过（如果存在item.Component的话）。因此，您可能需要查看React.cloneElement。您可以在https://reactjs.org/docs/react-api.html#cloneelement和在线的一些示例中阅读有关如何将道具传递到item.Component并进行渲染的示例。

为什么尝试在变量中呈现组件时会出错？

2 个答案: