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

taro编译成快手相关问题 #10557

Closed
Hehejie1 opened this issue Nov 2, 2021 · 5 comments
Closed

taro编译成快手相关问题 #10557

Hehejie1 opened this issue Nov 2, 2021 · 5 comments
Labels
F-react Framework - React T-kwai V-3 Version - 3.x walk-around 绕过问题

Comments

@Hehejie1
Copy link

Hehejie1 commented Nov 2, 2021

相关平台

快手小程序

使用框架: React

复现步骤

https://bytedance.feishu.cn/docs/doccn2jDLH4tEQgU3h1kCujKuTg?from=from_copylink

期望结果

编译正确

实际结果

编译错误

环境信息

Taro CLI 3.3.2 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 16.8.0 - /usr/local/bin/node
      Yarn: 1.22.11 - /usr/local/bin/yarn
      npm: 7.21.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.3.10 => 3.3.10 
      @tarojs/mini-runner: 3.3.10 => 3.3.10 
      @tarojs/react: 3.3.10 => 3.3.10 
      @tarojs/runtime: 3.3.10 => 3.3.10 
      @tarojs/taro: 3.3.10 => 3.3.10 
      @tarojs/webpack-runner: 3.3.10 => 3.3.10 
      babel-preset-taro: 3.3.10 => 3.3.10 
      react: ^17.0.2 => 17.0.2 
    npmGlobalPackages:
      typescript: 4.0.2
@Chen-jj
Copy link
Contributor

Chen-jj commented Nov 9, 2021

@Hehejie1 能提供一下 demo 么?

@Hehejie1
Copy link
Author

Hehejie1 commented Nov 10, 2021 via email

@Hehejie1
Copy link
Author

Hehejie1 commented Dec 6, 2021 via email

@Hehejie1
Copy link
Author

子元素消失.zip

@Chen-jj Chen-jj added the walk-around 绕过问题 label Dec 14, 2021
@Chen-jj
Copy link
Contributor

Chen-jj commented Dec 14, 2021

template diff 的时候,template 的 is 没有变更 。给快手提了一下:

https://developers.kuaishou.com/topic?bizType=miniprogram&tid=2846

NervJS/taro-plugin-platform-kwai#1 (comment) 是同一个问题。


这种写法:

<View className='content'>
  {[1].includes(tab) && <TestOne />}
  {[2].includes(tab) && <TestTwo tab={tab} user={user} />}
</View>

在更新的时候会 diff <TestOne><TestTwo>。对比 DOM 树结构可知,一开始是文本节点对应 <template name="#text">,更新后应该是 View 组件节点对应 <template name="static-view">

image

然而快手目前 template 的 is 不会变更,也就是说该 View 组件还是使用了文本节点的 template :<template name="#text">。所以就不显示了。

官方回复:问题根源在template的is暂时不支持变更。这部分的支持影响面比较大,最近暂时上不了,最快需要等一月中上线


目前只能绕过。

有很多办法,例如让更新时不要进行 diff,完全生成新的 DOM 子树:

// 例如把两个把它们分在两颗子树里
<View className='content'>
  <View>{[1].includes(tab) && <TestOne />}</View>
  <View>{[2].includes(tab) && <TestTwo tab={tab} user={user} />}</View>
</View>
// 又例如让 nodeType 不一样,diff 失效,直接重建子树
<View className='content'>
  {[1].includes(tab) && <TestOne />}
  {[2].includes(tab) && <Block><TestTwo tab={tab} user={user} /></Block>}
</View>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-react Framework - React T-kwai V-3 Version - 3.x walk-around 绕过问题
Projects
None yet
Development

No branches or pull requests

2 participants