Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Taro3] 深层嵌套到第15层需要重启组件时碰到 Text 导致重启失败子节点丢失 #6054

Closed
cncolder opened this issue Apr 20, 2020 · 13 comments
Assignees
Labels
question Further information is requested
Milestone

Comments

@cncolder
Copy link
Contributor

cncolder commented Apr 20, 2020

问题描述

深层嵌套时, 第15层会变成 <comp />, 之后的内容变成子组件.

如果第15层刚好是 Text, 则不会重启 <comp />, 下面的所有子节点会丢失.

复现步骤

import React from "react";
import { View, Text } from "@tarojs/components";

export default () => (
  <View>
    1
    <View>
      2
      <View>
        3
        <View>
          4
          <View>
            5
            <View>
              6
              <View>
                7
                <View>
                  8
                  <View>
                    9
                    <View>
                      10
                      <View>
                        11
                        <View>
                          12
                          <View>
                            13
                            <View>
                              14
                              {/* 注意 Text !!! */}
                              <Text>
                                15
                              </Text>
                            </View>
                          </View>
                        </View>
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  </View>
);

期望行为

报错信息

截屏2020-04-2119 57 31

截屏2020-04-2119 58 28

截屏2020-04-2119 59 32

系统信息

taro 3.0.0-beta.4

补充信息

如果您有功能上的建议,可以提到 FeatHub

使用上的问题,欢迎在「Taro 社区」一起交流

@taro-bot
Copy link

taro-bot bot commented Apr 20, 2020

CC @Chen-jj

@taro-bot
Copy link

taro-bot bot commented Apr 20, 2020

欢迎提交 Issue~

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

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

Good luck and happy coding~

@yuche
Copy link
Contributor

yuche commented Apr 21, 2020

text 节点不能包括 view 节点,这是小程序的原因,我认为这样做也没错。你把最后 16 的 text 标签改为 view 就行了

@yuche yuche added answered question Further information is requested labels Apr 21, 2020
@yuche yuche closed this as completed Apr 21, 2020
@cncolder
Copy link
Contributor Author

cncolder commented Apr 21, 2020

@yuche 你误会了, "15"这个文字也没有显示. 我更新了代码, 多截几张图.

@yuche yuche reopened this Apr 22, 2020
@taro-bot
Copy link

taro-bot bot commented Apr 22, 2020

Hello~

您的问题楼上已经有了确切的回答,如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

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

Good luck and happy coding~

@yuche
Copy link
Contributor

yuche commented Apr 24, 2020

text 元素也不能包含自定义组件,因此现在只能在渲染层级达到阈值(默认是 15 级)时给开发者一个警告,要求手动改变应用代码的层级,避免触发阈值时刚好是一个 text 组件的情况。例如:

export default () => (
  <View>
    1
    <View>
      2
      <View>
        3
        <View>
          4
          <View>
            5
            <View>
              6
              <View>
                7
                <View>
                  8
                  <View>
                    9
                    <View>
                      10
                      <View>
                        11
                        <View>
                          12
                          <View>
                            13
                            <View>
                              14
-                              {/* 15层是 Text,我们需要再加一个 View 或其它元素把他包住 */}
-                              <Text>
-                                15
-                              </Text>
+                              <View className="inline">
+                                <Text>
+                                  15
+                                </Text>
+                              </View>
                           </View>
                          </View>
                        </View>
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  </View>
);

yuche added a commit that referenced this issue Apr 24, 2020
* chore: enable lint-staged

* fix(runtime): 当渲染组件层级达到阈值时是一个 text 组件给予警告
close #6054
@yuche yuche closed this as completed Apr 24, 2020
@cncolder
Copy link
Contributor Author

cncolder commented Apr 25, 2020

OK, 既然是迈不过的槛, 有个提示就很好.

@Chen-jj
Copy link
Contributor

Chen-jj commented Dec 16, 2020

3.0.19 之后根治

@JNUfeatherwit
Copy link

3.0.19 之后根治

现在是3.1.0-beta.4,并没有根治

@rogerleung0411
Copy link
Contributor

3.0.19 之后根治

现在是3.1.0-beta.4,并没有根治

3.1.0-beta.4 是在 3.0.19 前 release 的

@Chen-jj
Copy link
Contributor

Chen-jj commented Jan 28, 2021

3.0.19 之后根治

现在是3.1.0-beta.4,并没有根治

3.1.0-beta.4 是在 3.0.19 前 release 的

3.1.0-beta.5 会合入,这周会发版。

@iNiL0119
Copy link

iNiL0119 commented Feb 11, 2021

看了楼上说3.0.19根治,刚好我也是3.0.18遇到这个问题,最后一层是<View>{...}</View>提示’请在此元素外再套一层非 Text 元素:<text>...</text>‘,的确如上所说的嵌套第15层也就是第16层的时候如果是文本,需要多加一层View或者Text或其他组件

@day-day-sleep
Copy link

day-day-sleep commented Jul 27, 2021

3.0.19 之后根治
<Text> 1 <Text> 2 <Text> 3 <Text> <Text> <Text>
现在貌似微信小程序还能重现这个问题。类似这种格式。因为需要用到小程序text的复制功能 所以不能转换成view 3.1.4 以及3.2.15都试过了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

7 participants