Taro3 渲染 HTML问题

[hulin32]

相关平台

微信小程序

复现仓库

https://github.com/flyingalex/taro-v3-bug-demo/blob/master/src/pages/index/index.jsx
小程序基础库: 2.11.3
使用框架: React

复现步骤

html内容:

<p style = "font-size=35px;color=grey"> With its unique classic Scandinavian feel condensed into a design, the Nerd Chair won the Muuto Talent Award in 2011.</p>

期望结果

渲染html

实际结果

VM17:1 The above error occurred in the <view> component:
    in view (created by Index)
    in view (created by Index)
    in Index (created by Page)
    in root (created by Page)
    in Page (created by AppWrapper)
    in App (created by AppWrapper)
    in AppWrapper
    VM17:1 The above error occurred in the <view> component:
    in view (created by Index)
    in view (created by Index)
    in Index (created by Page)
    in root (created by Page)
    in Page (created by AppWrapper)
    in App (created by AppWrapper)
    in AppWrapper

React will try to recreate this component tree from scratch using the error boundary you provided, Page.

TypeError: str.split is not a function
    at Style.set (runtime.esm.js:2069)
    at TaroElement.setAttribute (runtime.esm.js:2244)
    at runtime.esm.js:1172
    at Array.map (<anonymous>)
    at format (runtime.esm.js:1150)
    at parser (runtime.esm.js:1190)
    at setInnerHTML (runtime.esm.js:1279)
    at TaroElement.set (runtime.esm.js:1443)
    at setProperty (react.esm.js:142)
    at updateProps (react.esm.js:63)

    VM17:1 TypeError: str.split is not a function
    at Style.set (runtime.esm.js:2069)
    at TaroElement.setAttribute (runtime.esm.js:2244)
    at runtime.esm.js:1172
    at Array.map (<anonymous>)
    at format (runtime.esm.js:1150)
    at parser (runtime.esm.js:1190)
    at setInnerHTML (runtime.esm.js:1279)
    at TaroElement.set (runtime.esm.js:1443)
    at setProperty (react.esm.js:142)
    at updateProps (react.esm.js:63)

    in view (created by Index)
    in view (created by Index)
    in Index (created by Page)
    in root (created by Page)
    in Page (created by AppWrapper)
    in App (created by AppWrapper)
    in AppWrapper

环境信息

👽 Taro v3.0.2


  Taro CLI 3.0.2 environment info:
    System:
      OS: macOS 10.14.4
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
    npmPackages:
      @tarojs/cli: ^3.0.2 => 3.0.2 
      @tarojs/components: 3.0.2 => 3.0.2 
      @tarojs/mini-runner: ^3.0.2 => 3.0.2 
      @tarojs/react: 3.0.2 => 3.0.2 
      @tarojs/router: 3.0.2 => 3.0.2 
      @tarojs/runtime: 3.0.2 => 3.0.2 
      @tarojs/taro: 3.0.2 => 3.0.2 
      @tarojs/webpack-runner: 3.0.2 => 3.0.2 
      babel-preset-taro: ^3.0.2 => 3.0.2 
      eslint-config-taro: 3.0.2 => 3.0.2 
      react: ^16.13.1 => 16.13.1 
    npmGlobalPackages:
      typescript: 3.5.2

---

补充信息

感觉一些情况没考虑到

[honlyHuang]

HTML 里带样式的应该是这样的吧？

<p style = "font-size:35px;color:grey"> 1With its unique classic Scandinavian feel condensed into a design, the Nerd Chair won the Muuto Talent Award in 2011.</p>

尴尬，发现等号左右空格也是不行的

[Chen-jj]

style = 左右的空格导致

[hulin32]

@Chen-jj hello, 这里我看到html还有另外一个问题，图片默认mode用的是scaleToFill，我觉得应该是widthFix，不然图片会被压缩，无法通过css去修复

[Chen-jj]

@flyingalex 单独开一个 issue 吧，附上 demo

[hulin32]

@flyingalex 单独开一个 issue 吧，附上 demo

好的