Taro: 无法正常渲染 HTML

[xgqfrms]

问题描述

无法正常渲染 HTML

https://taro-docs.jd.com/taro/next/docs/next/html.html

复现步骤

  render () {
    const html = '<h1 style="color: red">Wallace is way taller than other reporters.</h1>';
    // function helloWorld() {
    //   const html = `<h1 style='color: red;'>Wallace is way taller than other reporters.</h1>`;
    //   return(<View className='taro_html' dangerouslySetInnerHTML={{ __html: html }}></View>)
    // }
    return (
      <View>
        <View className='react-render-html' dangerouslySetInnerHTML={{ __html: `<h1 style='color: red'>Wallace is way taller than other reporters.</h1>` }}></View>
        <View className='react-render-html' dangerouslySetInnerHTML={{ __html: html }}></View>
      </View>
    )
  }

期望行为

期望正常渲染 HTML

报错信息

系统信息

➜  mini-program✗ taro info
👽 Taro v1.3.34


  Taro CLI 1.3.34 environment info:
    System:
      OS: macOS 10.14.6
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.14.0 - /usr/local/bin/node
      Yarn: 1.21.1 - /usr/local/bin/yarn
      npm: 6.13.4 - /usr/local/bin/npm
    npmPackages:
      @tarojs/async-await: 1.3.34 => 1.3.34 
      @tarojs/components: 1.3.34 => 1.3.34 
      @tarojs/plugin-babel: 1.3.34 => 1.3.34 
      @tarojs/plugin-csso: 1.3.34 => 1.3.34 
      @tarojs/plugin-sass: 1.3.34 => 1.3.34 
      @tarojs/plugin-uglifyjs: 1.3.34 => 1.3.34 
      @tarojs/redux: 1.3.34 => 1.3.34 
      @tarojs/redux-h5: 1.3.34 => 1.3.34 
      @tarojs/router: 1.3.34 => 1.3.34 
      @tarojs/taro: 1.3.34 => 1.3.34 
      @tarojs/taro-alipay: 1.3.34 => 1.3.34 
      @tarojs/taro-h5: 1.3.34 => 1.3.34 
      @tarojs/taro-swan: 1.3.34 => 1.3.34 
      @tarojs/taro-weapp: 1.3.34 => 1.3.34 
      @tarojs/webpack-runner: 1.3.34 => 1.3.34 
      eslint-config-taro: 1.3.34 => 1.3.34 
      eslint-plugin-taro: 1.3.34 => 1.3.34 
      nerv-devtools: ^1.5.6 => 1.5.6 
      nervjs: ^1.5.6 => 1.5.6 
    npmGlobalPackages:
      typescript: 3.8.3

补充信息

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

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

[taro-bot[bot]]

CC @Chen-jj

[taro-bot[bot]]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[yuche]

Taro Next才有这个功能

[xgqfrms]

@yuche 请问，还有什么方式能实现 iframe 到效果吗；试了webview 会自动充满整个页面，不符合需求；

[xgqfrms]

RichText

nodes = {html}

https://nervjs.github.io/taro/docs/components/base/rich-text.html#htmlelement

[xgqfrms]

RichText

API

https://taro-docs.jd.com/taro/docs/1.3.34/components/base/rich-text.html

https://nervjs.github.io/taro/docs/components/base/rich-text.html#htmlelement

---

H5 OK

alipay Error ???

weapp ??? html tags filter

[Garfield550]

color 属性的引号没有 color="green"

[xgqfrms]

@Garfield550 还是不行❓

[xgqfrms]

[xgqfrms]

支付宝的bug ???

    const html = `
      支付宝小程序 rich-text bug
    `;
    // const html = `
    //   可当天预订，必须21时15分之前下单，要求必须<font color='green'><b>60</b>分钟内完成</font>在线支付。</br>预订时间：最晚需在【出行当天21:15】前购买<br>有效期：选择的使用日期当天有效。<br>适用条件：身高：1米（含）以上<br>
    // `;
    // const html = `
    //   可当天预订，必须21时15分之前下单，要求必须<font color="green"><b>60</b>分钟内完成</font>在线支付。</br>预订时间：最晚需在【出行当天21:15】前购买<br>有效期：选择的使用日期当天有效。<br>适用条件：身高：1米（含）以上<br>
    // `;


        <Text className='html-render-bug'>{html}</Text>
        <RichText className='html-render-bug' nodes={html}/>
        <RichText className='html-render-bug' nodes={html}></RichText>