单文件多组件渲染/生命周期异常

[yuxino]

场景

• 假设我有一个用于校验权限的Authority组件。
• Authority用authority这个状态来控制展示有、无权限的视图。
• 此时我把Authority组件放在了index页面里

遇到的问题

• Authority组件会被调用但是渲染的不正常，三元表达式不会被正常解析？不管有权限还是没权限的组件都会被展示出来。
• Authority的componentDidMount不会执行。

bug预览图

正常的版本

• 把Authority作为组件剥离到了另一个文件夹里，再引入进来
• Authority会根据状态展示对应的视图。
• Authority的生命周期会被正常执行

正常的预览图

复现方式

有两个分支。work分支是正常的版本。bug分支的话是不正常的版本

克隆以下仓库

git clone [email protected]:febug/taro_multiple_component_bug.git

再通过yarn安装依赖

一些可能要看的信息

➜  taro_multiple_component_bug git:(bug) ✗ taro info
👽 Taro v1.3.13


  Taro CLI 1.3.13 environment info:
    System:
      OS: macOS 10.14.5
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.16.0 - /usr/local/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 1.3.10 => 1.3.10
      @tarojs/plugin-babel: 1.3.10 => 1.3.10
      @tarojs/plugin-csso: 1.3.10 => 1.3.10
      @tarojs/plugin-sass: 1.3.10 => 1.3.10
      @tarojs/plugin-uglifyjs: 1.3.10 => 1.3.10
      @tarojs/router: 1.3.10 => 1.3.10
      @tarojs/taro: 1.3.10 => 1.3.10
      @tarojs/taro-alipay: 1.3.10 => 1.3.10
      @tarojs/taro-h5: 1.3.10 => 1.3.10
      @tarojs/taro-qq: 1.3.10 => 1.3.10
      @tarojs/taro-quickapp: 1.3.10 => 1.3.10
      @tarojs/taro-swan: 1.3.10 => 1.3.10
      @tarojs/taro-tt: 1.3.10 => 1.3.10
      @tarojs/taro-weapp: 1.3.10 => 1.3.10
      @tarojs/webpack-runner: 1.3.10 => 1.3.10
      eslint-config-taro: 1.3.10 => 1.3.10
      eslint-plugin-taro: 1.3.10 => 1.3.10
      nerv-devtools: ^1.4.0 => 1.4.3
      nervjs: ^1.4.0 => 1.4.3
      stylelint-config-taro-rn: 1.3.10 => 1.3.10
      stylelint-taro-rn: 1.3.10 => 1.3.10

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[luckyadam]

Taro 只支持单文件单组件，这里组件和页面不能存在同个文件中

[yuxino]

@luckyadam 好的我看到了 这里有特意说明。

是否会考虑支持多组件呢未来、毕竟多组件在设计组件库的时候也挺常见的。

举个例子。 我在一个文件里定了多个组件。

const Card = ...;
Card.Header = ...;
Card.Footer = ...;
export default Card;

这样我就能在用的时候组合我的Crad组件。

import Card from "...."

<Card>
  <Card.Header>头部</Card.Header>
  <Card.Footer>底部</Card.Footer>
</Card>

有点像AntD的Menu。

PS: 有六成的人或多或少这么干过

[Chen-jj]

@yuxino 搞个 index 文件聚合在一起再暴露不就可以了么

import Modal from './modal'
import ModalBody from './ModalBody'
import ModalFooter from './ModalFooter'

Modal.body = ModalBody
Modal.footer = ModalFooter

export default Modal

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[yuxino]

@Chen-jj 是的。聚合完全可以解决这个问题。