Javascript 是否仍然可以使用模板文本在返回中呈现react组件？

我试图使用模板文本在return中使用react组件，但是，它不起作用。我做了大量的研究，在最大的网站只提供了渲染HTML标签内的模板文字

请建议

import IconButton from '@abc/components'  

export const ColumnsOfBryntum = (recordType) => {
render() => {
   switch (recordType) {
      case 'kpi':
      return `<div>
            <div class="channel-info">
            <div class="channel-name">${value}</div>                
            ${<IconButton icon="plus"></IconButton>}
      </div>`;
    case 'channelGroup':
      size.height = 50;
      row.addCls('channel-group-row');
      return `<div>
           <div class="channel-info">
           <div class="channel-name">${value}</div>              
           ${<IconButton icon="edit"></IconButton>}
      </div>`;
   }
}

从“@abc/components”导入图标按钮
export const ColumnsOfBryntum=（记录类型）=>{
render（）=>{
开关（记录型）{
案例“kpi”：
返回`
${value}
${}
`;
案例“channelGroup”：
尺寸.高度=50；
row.addCls（'channel-group-row'）；
返回`
${value}
${}
`;
}
}

}

输出：[对象对象]

我认为这会起作用 从“@abc/components”导入图标按钮

export const ColumnsOfBryntum = (recordType) => {
render() => {
   switch (recordType) {
      case 'kpi':
      return <IconButton icon="plus"></IconButton>;
    case 'channelGroup':
      size.height = 50;
      row.addCls('channel-group-row');
      return <IconButton icon="edit"></IconButton>;
   }
}

---

export const ColumnsOfBryntum=（记录类型）=>{
render（）=>{
开关（记录型）{
案例“kpi”：
返回；
案例“channelGroup”：
尺寸.高度=50；
row.addCls（'channel-group-row'）；
返回；
}
}

export const ColumnsOfBryntum=（{recordType}）=>{
开关（记录型）{
案例“kpi”：
返回(
{value}
);
案例“channelGroup”：
尺寸.高度=50；
row.addCls（'channel-group-row'）；
返回(
{value}
);
违约：
返回null；
}
};

---

假设您将

recordType

作为道具传递，则需要添加花括号来对其进行分解。给定您提供的代码，

value

、

size

和

row

仍将是未定义的。您还缺少一些结束标记。我继续并删除了外部的

div

，因为它们没有类或内联样式设置。

为什么不返回JSX而不是字符串？请参考下面的链接，它应该可以解决您的问题：正如Nick所说，您可以返回JSX，一个div是JSX的有效语法，您可以将所有返回都包装在一个React片段上。我忘了提到我们还有另一个div，所以不能用作return；那么试试这个xport const ColumnsOfBryntum=（recordType）=>{render（）=>{switch（recordType）{case'kpi'：返回；case'channelGroup'：size.height=50；row.addCls（'channel-group-row'）；返回；}

export const ColumnsOfBryntum = ({ recordType }) => {
  switch (recordType) {
    case 'kpi':
      return (
        <div className="channel-info">
          <div className="channel-name">{value}</div>
          <IconButton icon="plus"></IconButton>
        </div>
      );
    case 'channelGroup':
      size.height = 50;
      row.addCls('channel-group-row');
      return (
        <div className="channel-info">
          <div className="channel-name">{value}</div>
          <IconButton icon="edit"></IconButton>
        </div>
      );
    default:
      return null;
  }
};