<span> tag not be rendered when render html

[yinxin630]

相关平台

微信小程序

复现仓库

https://github.com/yinxin630/render-html-bug

小程序基础库: 2.13.0
使用框架: React

复现步骤

1. clone the repo
2. yarn install
3. yarn dev:weapp
4. open it in wechat devtool

期望结果

render <span> tag

实际结果

<span> tag not be rendered

环境信息

$ taro info
👽 Taro v3.0.11


  Taro CLI 3.0.11 environment info:
    System:
      OS: macOS 10.15.6
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.16.0 - ~/.nvm/versions/node/v12.16.0/bin/node
      Yarn: 1.22.0 - /usr/local/bin/yarn
      npm: 6.13.4 - ~/.nvm/versions/node/v12.16.0/bin/npm
    npmPackages:
      @tarojs/components: 3.0.11 => 3.0.11
      @tarojs/mini-runner: 3.0.11 => 3.0.11
      @tarojs/react: 3.0.11 => 3.0.11
      @tarojs/runtime: 3.0.11 => 3.0.11
      @tarojs/taro: 3.0.11 => 3.0.11
      @tarojs/webpack-runner: 3.0.11 => 3.0.11
      babel-preset-taro: 3.0.11 => 3.0.11
      eslint-config-taro: 3.0.11 => 3.0.11
      react: ^16.10.0 => 16.13.1

[yinxin630]

After many attempts, I found out. Only I did not use the <Text> component. The problem will appear.
If I import the <Text> component and render some text(include empty string) casually. The problem does not appear anymore

I see that <p> will be rendered as <View>. <span> will be rendered as <Text>.

[yinxin630]

code of render:

render() {
  const html = "<div><p>111<p><span>222</span><p>333</p></div>";
  return (
    <View className='index'>
      <View dangerouslySetInnerHTML={{ __html: html }}></View>
    </View>
  );
}

bug screenshot

[ZakaryCode]

Taro currently does not support the use of HTML tags to render mini-program. If it is only used on the web, it is feasible to skip our code detection run by injection. However, please note that this writing method will not be officially supported.