taro dangerouslySetInnerHTML 渲染视频报错

hiz5n14c  于 2023-02-04  发布在  其他
关注(0)|答案(3)|浏览(225)

相关平台

微信小程序

复现仓库

https://github.com/wangxiaocuo/bugs-colllection/tree/main/taro3-dangerouslySetInnerHTML
小程序基础库: 2.17.0
使用框架: React

复现步骤

dangerouslySetInnerHTML 属性中放入 video 标签会报错,渲染不出。

<View
  dangerouslySetInnerHTML={{
    __html: `<video src="https://photo.wm-motor.com/recommend_drive_img/prod/1619600124882_%E9%80%A0%E8%BD%A6%E8%89%BA%E6%9C%AF.mp4" controls="controls" style="width: 100%;"></video>`,
  }}
></View>

关键是同样的版本同样的小程序,昨天还能正常渲染,今天打包就渲染不了了,我很迷。。。

报错信息:

WXMLRT_$gwx:./base.wxml:template:205:16: Template `tmpl_0_video` not found.

[WXML Runtime warning] ./base.wxml
 Template `tmpl_0_video` not found.
  203 | 
  204 | <template name="tmpl_2_container">
> 205 |   <template is="{{xs.a(2, i.nn, l)}}" data="{{i:i,cid:2,l:xs.f(l,i.nn)}}" />
      |                ^
  206 | </template>
  207 | 
  208 | <template name="tmpl_3_catch-view">

期望结果

正常渲染视频

实际结果

报错

环境信息

Taro v3.2.10

  Taro CLI 3.2.10 environment info:
    System:
      OS: macOS 11.3.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.17.0 - /usr/local/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.14.13 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.2.10 => 3.2.10
      @tarojs/mini-runner: 3.2.10 => 3.2.10
      @tarojs/react: 3.2.10 => 3.2.10
      @tarojs/runtime: 3.2.10 => 3.2.10
      @tarojs/taro: 3.2.10 => 3.2.10
      @tarojs/webpack-runner: 3.2.10 => 3.2.10
      babel-preset-taro: 3.2.10 => 3.2.10
      eslint-config-taro: 3.2.10 => 3.2.10
      react: ^17.0.0 => 17.0.2
    npmGlobalPackages:
      typescript: 4.2.4

补充信息

不光以上测试的最新的版本,实际项目的版本也报错

👽 Taro v3.0.29

  Taro CLI 3.0.29 environment info:
    System:
      OS: macOS 11.3.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.17.0 - /usr/local/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.14.13 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.29 => 3.0.29 
      @tarojs/components: 3.0.29 => 3.0.29 
      @tarojs/mini-runner: 3.0.29 => 3.0.29 
      @tarojs/react: 3.0.29 => 3.0.29 
      @tarojs/runtime: 3.0.29 => 3.0.29 
      @tarojs/taro: 3.0.29 => 3.0.29 
      @tarojs/webpack-runner: 3.0.29 => 3.0.29 
      babel-preset-taro: 3.0.29 => 3.0.29 
      eslint-config-taro: 3.0.29 => 3.0.29 
      react: ^16.10.0 => 16.14.0 
      taro-ui: ^3.0.0-alpha.10 => 3.0.0-alpha.10 
    npmGlobalPackages:
      typescript: 4.2.4
cbjzeqam

cbjzeqam1#

貌似找到了原因。就是如果video组件没有被显式引入的话,taro打包weapp的时候不会把相应的模板代码打包进来。所以应该在外层把 @tarojs/components 里面的video组件引进来。

6tqwzwtp

6tqwzwtp2#

貌似找到了原因。就是如果video组件没有被显式引入的话,taro打包weapp的时候不会把相应的模板代码打包进来。所以应该在外层把 @tarojs/components 里面的video组件引进来。

我试了,好像不行

ttp71kqs

ttp71kqs3#

貌似找到了原因。就是如果video组件没有被显式引入的话,taro打包weapp的时候不会把相应的模板代码打包进来。所以应该在外层把 @tarojs/components 里面的video组件引进来。

我又去琢磨尝试了,你说的方法可行的,需要手动引入一个 Video ,但是节点必须得渲染出来

render() {
  return (
    <>
      <View dangerouslySetInnerHTML={{ __html: '<video></video>' }} />

      {/* 这样可以 */}
      <Video style='width: 0; height: 0; opacity: 0;' />

      {/* 这样不行 */}
      {
        false && <Video />
      }
    </>
  )
}

相关问题