taro3 externalClasses 无效

[Wkevin8]

相关平台

微信小程序

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

复现步骤

B.tsx：

export default class B extends Component<any, any> {
  static externalClasses = ["my-class"]

  render() {
    return (<View className="my-class">111111111111</View>)
  }
}

A.tsx：

export default class A extends Component<any, any> {
  render() {
    return (<ScrollView scrollY={true}
                        scrollWithAnimation={true}
                        className={"videos-wrapper"}>
  <B my-class="red-text"/>
    </ScrollView>)
  }
}

a.scss：

.red-text {
  color: red;
}

期望结果

.red-text的color 生效到B.tsx的view上

实际结果

没有生效

环境信息

Taro CLI 3.2.0 environment info:
    System:
      OS: macOS 10.14.5
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.22.0 - /usr/local/bin/node
      Yarn: 1.21.1 - /usr/local/bin/yarn
      npm: 6.14.11 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.2.0 => 3.2.0
      @tarojs/mini-runner: 3.2.0 => 3.2.0
      @tarojs/react: 3.2.0 => 3.2.0
      @tarojs/runtime: 3.2.0 => 3.2.0
      @tarojs/taro: 3.2.0 => 3.2.0
      @tarojs/webpack-runner: 3.2.0 => 3.2.0
      babel-preset-taro: 3.2.0 => 3.2.0
      eslint-config-taro: 3.2.0 => 3.2.0
      react: ^17.0.0 => 17.0.2
    npmGlobalPackages:
      typescript: 3.7.3

[Chen-jj]

@Wkevin8 在 Taro 3 中，React 的组件 不对应 小程序自定义组件，而 externalClasses 是小程序自定义组件的功能。

你的需求按普通 React 写法即可：

// B.tsx
class B extends Component<any, any> {
  render() {
    return (
      <View className={this.props.myClass}>111111111111</View>
    )
  }
}

// A.tsx
class A extends Component<any, any> {
  render() {
    return (
      <ScrollView
        scrollY
        scrollWithAnimation
        className="videos-wrapper"
      >
        <B myClass="red-text"/>
      </ScrollView>
    )
  }
}

// a.scss
.red-text {
  color: red;
}