关于if-else return 的 JSX 设置为一个变量

[fred8617]

Feature Request 请提到 FeatHub

Taro 使用上的问题请提到 Taro 社区——让每一次交流被沉淀

如果是提交 bug，请搜索文档和 issue，确认以下事项：

• 该问题没有在其他 issue 和文档讨论到，不属于重复内容

• 分割线以下的模板除了「 补充信息」每一样都必填

如果不满足以上两点要求的 bug 报告，issue 会被直接关掉。

请多多理解，您现在的不便将会使 Taro 开发者更高效地定位你的问题，修复你的问题。像你一样的 Taro 的使用者也可以通过搜索找到你提供的 bug，对各方都有很大好处。

🙏🙏🙏
阅读完后请在提交的issue中删除以上内容，包括分割线。

问题描述
[问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]
找不到问题，全部设置成了变量，循环有层数限制么
复现步骤
[复现问题的步骤]

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

[代码只贴截图，不贴文字会被视为无效issue]
`
render() {
const mainComp = (

{this.store.chatList.map((chat, i) => {
let comp;
if (chat.type === "user") {
comp = {chat.text};
} else if (chat.type === "robot" && chat.componentList) {
comp = (

{chat.componentList.map((e, i) => {
const listItem = (

);
return listItem;
})}

);
} else if (
chat.type === "robot" &&
chat.list &&
!chat.componentList
) {
comp = chat.list.map((values, index) => {
const onClick = !chat.nextUrl
? null
: () => {
const param = {};
chat.nextParamNames.forEach(e => {
if (e.value === "text") {
param[e.key]=values;
} else {
param[e.key]=chat.data[index][e.value];
}

                });
                console.log(param);
                this.onSend(values, chat.nextUrl, {
                  ...chat.extra,
                  ...param
                });
              };
          let showComp;
          if (index !== chat.list.length - 1) {
            showComp = (
              <View key={`chatin_${index}`} onClick={onClick}>
                <View>{values}</View>
                <AtDivider height={15} />
              </View>
            );
          } else {
            showComp = (
              <View key={`chatin_${index}`} onClick={onClick}>
                <Text>{values}</Text>
              </View>
            );
          }
          return showComp;
        });
      }
      let allComp = (
        <Dialog
          key={`chat_${i}`}
          backgroundColor={
            chat.backgroundColor || (chat.list ? "#ffffff" : null)
          }
          color={chat.color || (chat.list ? "#6190E8" : null)}
          role={chat.type}
        >
          {comp}
        </Dialog>
      );
      return allComp;
    })}
  </View>
);
const indexComp = (
  <View className="index">
    {mainComp}
    <DialogInput
      onSend={text => this.onSend(text, "task", { bodyname: text })}
    />
  </View>
);
return indexComp;

}
`
[代码只贴截图，不贴文字会被视为无效issue]
[代码只贴截图，不贴文字会被视为无效issue]

// 这里可以贴代码
// 点击链接查看如何插入代码：
// https://coding.net/help/doc/project/markdown.html#i-5

// ```js
// 代码放这里（前后的 "```" 有助 Mardown 整理代码格式和加入代码高亮）
// ```

// 提供完整可复现的代码和整理好代码格式，有助于我们快速定位问题，节省你我时间。
// 代码提供不全或代码格式混乱的 issues 【有可能被忽略】，烦请各位注意。

期望行为
[这里请用简洁清晰的语言描述你期望的行为]

报错信息

[这里请贴上你的完整报错截图或文字]

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

• 操作系统: [e.g. Windows 10]
• Taro 版本 [e.g. v.0.0.64]
• Node.js 版本 [e.g. v9.0.0]
• 报错平台 [h5, weapp]

补充信息
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[fred8617]

代码乱了，贴个图，不太明白还哪里需要设置变量

[yuche]

这样试试： <Block>{chatlist.map(...) }</Block>

[fred8617]

@yuche 这样改可以了，貌似循环中判断在循环必须要block包裹，组件如果用doexpression倒是不用提升到顶部赋值

[shenghanqin]

我是不是可以理解，react直接return 数组jsx，而tarojs需要用<block></block>来包裹？

[yuche]

简单说 if-else 中不能定义 JSX 变量，必须在 render 的顶层作用域定义。

[taro-bot]

Hello~

您的问题楼上已经提供了解决方案，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~