1.3.0-beta.3，代码编译成微信小程序代码的时候，dom元素递归调用的时候，dom无法完全显示

[Faithree]

问题描述
1.3.0-beta.3，代码编译成微信小程序代码的时候，dom元素实现递归调用的时候，dom在开发者工具和手机上均无法完全显示

复现步骤
[复现问题的步骤]

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

[或者可以直接贴源代码，能贴文字就不要截图]

import Taro, { Component, Config } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import './index.less';

export default class Index extends Component {
  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  };
  renderString = doc => {
    return (
      Array.isArray(doc) &&
      doc.map(dom => {
        if (dom.type === 'text') {
          console.log(4444444444444444444444);
          console.log(dom);
          return (
            <Text
              key={Math.random() * Math.random()}
              className={(dom.attrs && dom.attrs.class) || ''}
            >
              {dom.content}
            </Text>
          );
        } else if (dom.type === 'tag') {
          console.log(22222222222222);
          console.log(dom);
          return (
            <Text
              key={Math.random() * Math.random()}
              className={(dom.attrs && dom.attrs.class) || ''}
            >
              {dom.children && this.renderDom(dom.children)}
            </Text>
          );
        }
      })
    );
  };
  renderDom = doc => {
    return (
      Array.isArray(doc) &&
      doc.map(dom => {
        if (dom.type === 'text') {
          console.log(333333333333333);
          console.log(dom);
          return (
            <Text
              key={Math.random() * Math.random()}
              className={(dom.attrs && dom.attrs.class) || ''}
            >
              {dom.content}
            </Text>
          );
        } else if (dom.type === 'tag') {
          console.log(1111111111111);
          console.log(dom);
          return (
            <Text
              key={Math.random() * Math.random()}
              className={(dom.attrs && dom.attrs.class) || ''}
            >
              {dom.children && this.renderString(dom.children)}
            </Text>
          );
        }
      })
    );
  };

  render() {
    const ast = [
      {
        type: 'tag',
        name: 'span',
        voidElement: false,
        attrs: {},
        children: [
          {
            content: '在',
            type: 'text'
          },
          {
            attrs: { class: 'highlight' },
            children: [{ content: '端午活动页面', type: 'text' }],
            name: 'a',
            type: 'tag'
          },
          { content: '提交表单', type: 'text' }
        ]
      }
    ];
    return <View className="index">{this.renderDom(ast)}</View>;
  }
}

期望行为
页面展示文本

在端午活动页面提交表单
但是目前显示在提交表单

报错信息
页面输出结果不符合预期

dom节点不符合预期

系统信息

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

• 操作系统: [e.g. Windows 10]
• Taro 版本 [e.g. 1.3.0-beta.3]
• Node.js 版本 [e.g. v8.4.0]
• 报错平台 [weapp]

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

附上github地址
https://github.com/Faithree/taro-bug

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[Faithree]

这个问题，看了官网的demo互相调用不同的函数，还是无法解决，麻烦大佬指导一下@yuche

[yuche]

尝试了一下 template 的确不能相互引用，你可以把 renderDom/renderString 作为独立的组件相互引用试试看，这样应该能解决问题

[taro-bot]

CC @yuche

[Faithree]

尝试了一下 template 的确不能相互引用，你可以把 renderDom/renderString 作为独立的组件相互引用试试看，这样应该能解决问题

也不行，编译直接报错了，编译失败，详情看原仓库@yuche

[yuche]

那是因为你没写 return

[Faithree]

应该有return吧，只是做了判断，大佬能不能提个merge看看。😊😊😊@yuche

[yuche]

https://github.com/Faithree/taro-bug/pull/1
另外一个文件也要改

[Faithree]

我把ts 去掉，改成js ,并且加上了return ,编译报错,代码已更新.
报错信息

VM233:1 thirdScriptError
$taroCompReady is not defined; [Component] Property Observer Error @ pages/index/renderDom#observer
ReferenceError: $taroCompReady is not defined

@yuche

[yuche]

点进去看看

[Faithree]

@yuche

[Faithree]

这个问题后来暂时解决了，虽然taro不支持递归，但是我这边已知的业务需求并不需要递归太多次，也就是层级的最大限度是够的，例如七层，那我写七个一模一样的递归函数，逐一调用，模拟出递归的效果。

[Faithree]

期待未来的不久taro支持递归。
Good luck and happy coding~

[yodagg]

期待未来的不久taro支持递归。

不支持调用组件自身，但是可以把自身再复制一份，两个相同的组件互相调用是可以做到递归的。

[Faithree]

期待未来的不久taro支持递归。

不支持调用组件自身，但是可以把自身再复制一份，两个相同的组件互相调用是可以做到递归的。

上面有源码啊，贴出来了，互相调用，不行

[yodagg]

写成文件的方式 A.js <=> B.js，是可以做到递归组件的，我在项目里边就是这么干的。

[Faithree]

写成文件的方式 A.js <=> B.js，是可以做到递归组件的，我在项目里边就是这么干的。
确定是递归吗，而不是简单的A调用B B调用A，因为我上面也是递归，不过我上面结构层级可能会比较深，貌似就不行了，taro也不报错，但是不再渲染元素了，如果可以的话，你可以下载我上面贴出来的demo，或者你贴一个你的demo,一起发现问题，谢了。

[yodagg]

这是一个例子，你可以看看例子
我没有使用你贴的代码，估计那会让问题更复杂，我看代码大概知道你要做什么，我也在做类似的项目，这里的实现就是动态组件+递归，这是可行的。

[Faithree]

这是一个例子，你可以看看例子
我没有使用你贴的代码，估计那会让问题更复杂，我看代码大概知道你要做什么，我也在做类似的项目，这里的实现就是动态组件+递归，这是可行的。

taro小程序端，你上面的项目是一个网页，没有可比性，而且你这代码貌似没看到递归在哪，article.js里面没有调用product.js，他们也没有互相调用？

[yodagg]

@Faithree ，没at我没看到。

你是不是看错了项目，你看看tree这个分支，https://github.com/so-diao/taro-report/tree/tree。

这个网页与小程序端是同步的，网页修改了，小程序会同步修改的，小程序码在右上角图标那。

[yuche]

@Faithree
楼上 @so-diao 的例子应该是可行的，类的方法组件不能相互调用，但是整个类是可以相互调用的。

[Faithree]

@yuche @so-diao 上次看错项目了，这次看到了递归了，但我的上面的demo也用过类似的类调用类这种，但是我当时是不行的，初步判断我的数据结构比较复杂，或者是写的判断条件太多了导致的不行，我看看我那个能不能简化一下代码，再定位一下问题谢谢两位。