1.2.4小程序编译后出现wxml是空的，编译后脚本里面出现React.createElement(...)

[hyccpq]

问题描述
小程序打包编译，在组件嵌套的情况下编译后脚本中出现React.createElement()，运行时自然不存在React。之前在1.0.7版本中是正常的，1.2.4升级后出现此问题。

复现步骤
[复现问题的步骤]

1. 引入两个组件，一个组件嵌套到另外一个内
2. 打包后会显示React is not defined
3. 查看打包的脚本可以看到jsx被编译成了react的reader函数的形式

// 出现问题的页面
import Taro, { Component, showToast, makePhoneCall } from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import MyFromPage from "../../component/model/fromPage";
import { AppStore } from "src/store/reducers";
import { SystemInfo } from "src/store/types";
import { connect } from "@tarojs/redux";
import "./index.styl";
import MenuListComponent from "../../component/plugin/menuIist";
import { MenuList } from "src/types/types";

export interface SettingProps {
  system: SystemInfo;
}

const mapState2Props = (state: AppStore) => ({
  system: state.system
});

const mapDispatch2Props = _ => ({});

@connect(
  mapState2Props,
  mapDispatch2Props
)
export default class Setting extends Component<SettingProps, any> {
  static settingList: MenuList<string>[] = [
    {
      value: "help",
      name: "帮助"
    },
    {
      value: "about",
      name: "关于"
    },
    {
      value: "customPhone",
      name: "客服电话"
    },
    {
      value: "business",
      name: "商务合作"
    }
  ];

  private handleOneList(item: MenuList<string>, _: number) {
    console.log(item);
    switch (item.value) {
      case "about":
        Taro.navigateTo({ url: "/pages/tool_page/about/index" });
        break;
      case "customPhone":
        makePhoneCall({ phoneNumber: "08752281616" });
        break;
      default:
        showToast({ title: "开发中，敬请期待！", icon: "none" });
    }
  }

  public render() {
    return (
      <View>
        <MyFromPage
          title="设置"
          paddingTop={this.props.system.barHeight}
          isShowSubmit={false}
          titleOverPaddingLeft={70}
        >
          <MenuListComponent
            menuList={Setting.settingList}
            onSelectMenuList={this.handleOneList.bind(this)}
          />
        </MyFromPage>
      </View>
    );
  }
}

// MenuList组件
import Taro, { Component, ComponentOptions } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './menu.styl'
import { MenuList } from 'src/types/types'

export interface MenuListComponentProps {
  menuList: MenuList<string>[]
  onSelectMenuList: (item: MenuList<string>, index: number) => void
}

export interface MenuListComponentState {}

class MenuListComponent extends Component<
  MenuListComponentProps,
  MenuListComponentState
> {
  public static options: ComponentOptions = {
    addGlobalClass: true
  }

  static defaultProps = {
    menuList: []
  }

  readonly state: MenuListComponentState = {}

  public render() {
    return (
      <View className="menu-all">
        {this.props.menuList.map((item, index) => (
          <View key={index}>
            <View
              className="item"
              onClick={this.props.onSelectMenuList.bind(this, item, index)}
            >
              {item.icon && (
                <Text
                  className={`iconfont ${item.icon} icon_def_color icon-size`}
                />
              )}
              <Text className="title">{item.name}</Text>
              <Text className="iconfont icon-chevronright icon_back_color" />
            </View>
            {item.line && <View className="line" />}
          </View>
        ))}
      </View>
    )
  }
}

export default MenuListComponent

import Taro, { Component, ComponentOptions } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './fromPage.styl'
import { ComponentClass } from 'react'
import { AtButton, AtForm } from 'taro-ui'

export interface FromPageProps {
  title: string
  paddingTop: number
  titleOverPaddingLeft?: number
  btnStr?: string
  onSubmit?: () => void
  leftText?: string
  isShowSubmit?: boolean
  onClickLeftText?: () => void
}

export interface FromPageState {}

class FromPage extends Component<FromPageProps, FromPageState> {
  public static options: ComponentOptions = {
    addGlobalClass: true
  }

  static defaultProps = {
    titleOverPaddingLeft: 0,
    isShowSubmit: true,
    paddingTop: 0,
    btnStr: '提交'
  }

  readonly state: FromPageState = {}

  private backNextPage() {
    Taro.navigateBack()
  }

  private jumpRegPage() {
    Taro.navigateTo({ url: '/pages/user/register/index' })
  }

  public render() {
    return (
      <View
        className="from"
        style={{ paddingTop: `${this.props.paddingTop}px` }}
      >
        <View className="close" onClick={this.backNextPage.bind(this)}>
          <Text className="iconfont icon-close" />
        </View>
        <View className="all-content">
          <View
            className="title-area"
            style={{ paddingLeft: this.props.titleOverPaddingLeft + 'rpx' }}
          >
            <View className="title">{this.props.title}</View>
            {this.props.leftText && (
              <View
                className="small-total"
                onClick={this.jumpRegPage.bind(this)}
              >
                注册即同意《用户服务协议与隐私协议》
              </View>
            )}
          </View>
          <View className="context">
            {this.props.children}
            {this.props.isShowSubmit && (
              <View className="submit">
                <View className="submit-btn">
                  <AtButton
                    type="primary"
                    onClick={this.props.onSubmit!.bind(this)}
                  >
                    {this.props.btnStr}
                  </AtButton>
                </View>
                {this.props.leftText && (
                  <View
                    className="left-text"
                    onClick={this.props.onClickLeftText}
                  >
                    {this.props.leftText}
                  </View>
                )}
              </View>
            )}
          </View>
        </View>
      </View>
    )
  }
}

export default FromPage as ComponentClass<FromPageProps, FromPageState>

期望行为
正常将组件编译到wxml中

报错信息

编译后小程序开发平台出现

脚本里面带有这个

系统信息

👽 Taro v1.2.4

Taro CLI 1.2.4 environment info:
System:
OS: macOS 10.14.2
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.13.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
npmPackages:
@tarojs/async-await: 1.2.4 => 1.2.4
@tarojs/components: 1.2.4 => 1.2.4
@tarojs/plugin-babel: 1.2.4 => 1.2.4
@tarojs/plugin-csso: 1.2.4 => 1.2.4
@tarojs/plugin-sass: ^1.2.4 => 1.2.4
@tarojs/plugin-stylus: 1.2.4 => 1.2.4
@tarojs/plugin-uglifyjs: 1.2.4 => 1.2.4
@tarojs/redux: 1.2.4 => 1.2.4
@tarojs/redux-h5: 1.2.4 => 1.2.4
@tarojs/router: 1.2.4 => 1.2.4
@tarojs/taro: 1.2.4 => 1.2.4
@tarojs/taro-alipay: 1.2.4 => 1.2.4
@tarojs/taro-h5: 1.2.4 => 1.2.4
@tarojs/taro-swan: 1.2.4 => 1.2.4
@tarojs/taro-weapp: 1.2.4 => 1.2.4
@tarojs/webpack-runner: 1.2.4 => 1.2.4
eslint-config-taro: 1.2.4 => 1.2.4
eslint-plugin-taro: 1.2.4 => 1.2.4

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[taro-bot]

CC @yuche

[yuche]

<MenuListComponent menuList={Setting.settingList} onSelectMenuList={this.handleOneList.bind(this)} />
你这个写法会 Setting 自己放到 data 里，而 Setting 是一个类声明函数，他会被序列化掉，因此是肯定拿不到正确的值的。不过这时编译器把他当做一个 JSX 处理所以报错了。

你可以把 settingList 放在当前类实例里去，或者任何被序列化之后还能拿到准确值的数据结构，或者单独作为一个变量使用。