1.0.0-beta.22 发布

[Simbachen]

主要更新有小程序组件化重构，在这一版中，采用小程序原生的自定义组件来实现组件化，相较之前的基于 template 的组件化有了非常大的进步。

主要更新功能：

• 自定义组件现在可以传入 this.props.children；
• 稳定性有了很大的提高，之前在各种情况下自定义组件传参失败的情况会大幅减少；
• 基于原生组件化功能，我们将逐步取消之前版本的各种限制，包括：
  • 使用第三方组件库，例如 zan-ui
  • 传入匿名函数
  • 在 render 方法之外使用 JSX 元素

升级需要注意：

• 样式，小程序自定义组件除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。因此组件样式需写在对应的wxss文件中。通过className传入组件样式。
• props 传函数，在小程序中是通过组件事件来实现的，在子组件中调用时无法获取到函数执行的返回值，同时给子组件传递函数时，属性名必须以 on 开头
• 受限于小程序组件化，必须要在 properties 里指定具体的 prop 才能传入。因此，如果代码中没有使用到任何 prop，直接在render方法里打印this.props 将会是一个空对象
• 由于小程序不支持将data中任何一项的value设为 undefined ，在setState的时候也请避免这么用。你可以使用null来替代
• 不要使用id作为prop或state，例如this.props.id在小程序中会丢失

如何升级到beta版本：

原有的update命令无法升级到beta版，需要手动升级。

• 升级cli工具到beta版：npm install -g @tarojs/[email protected]
• 到对应的项目目录中手动更新package.json文件，将@tarojs 下相关的依赖包更新到对应的beta版本

试用中遇到问题可以在这里回复~

[rojer95]

体验了一下。
遇到这个问题。

Putton/index.js 应该是存在的。

已经找到问题了，我只更新了项目下的cli，全局没更新。导致了这个问题。

[songkeys]

通过 props map 出来的渲染出错：

     <View className='tabs-container'>
        {this.props.tabs.map((t, i) => (
          <View
            className={`tab ${this.state.activeIndex === i ? 'active' : ''}`}
            key={t}
            onClick={this.handleChangeTab.bind(this, i)}
          >
            <Text>{t}</Text>
          </View>
        ))}
      </View>

渲染结果：

<block>
    <view class="tabs-container">{{__triggerPropsFn("tabs.map", [
        <View>].concat([(t, i) => { return
            <View className={anonymousState__temp} wx:key={t}
            bindtap="handleChangeTab" data-e-handleChangeTab-so="this" data-e-handleChangeTab-a-a={i}>
                <Text>{t}</Text>
            </View>; }]))}}</view>
</block>

[luckyadam]

@songkeys 升级到 1.0.0-beta.1 修复了这个问题

[songkeys]

1.0.0-beta.1:
this.props.children 在模板中与其他变量混合导致编译出错：

<Button>{this.props.text}</Button>    // ok!
<Button>{this.props.children}</Button>    // ok!
<Button>{this.props.text || this.props.children}</Button>    // 出错

编译结果：(Bad value with message)

<button>{{text || <slot />}}</button>

[songkeys]

1.0.0-beta.1:
渲染自定义组件时，使用 this.props.xxx 进行判断的条件渲染有问题：

static defaultProps = {
  isTrue: true, // or false
}
...
{!this.prop.isTrue && <Btn />}

如果直接使用 defaultProps 进行渲染没有问题，但一旦这个 prop 是父组件传下来的，就会出错：

出错行为还挺奇怪……好像是下面这样，还没仔细研究具体行为：

{!this.prop.isTrue && <Btn />} // 会出错
{this.prop.isTrue && <Btn />} // 不会出错

同时发现，如果直接把这个字段写在页面上，还是可以显示的，也可以与自带组件条件渲染，也可以传入自定义组件，但就是不能条件渲染自定义组件：

// 下面的都是正确的
<View>{this.props.isTrue}</View>
{!this.props.isTrue && <View>test</View>}
<Btn text={this.props.isTrue}

==========
edited:

又尝试了很多情况，总结起来就是 this.props.xxx 与自定义组件条件渲染时，只要变成了否定形式，就出现上面的那种错误。

[songkeys]

1.0.0-beta.1:
好像 defaultProps 即使设定了，也全部变成 null 了？

[luckyadam]

@songkeys 收到~ 非常感谢反馈~ 我们快速跟进一下~

[yuche]

@songkeys
3202b49 可以支持到<Button>{this.props.text || this.props.children}</Button> 这种写法，原来觉得在 JSX 使用 || 的频率比较低，现在有 children 了其实还是应该支持的。

至于 {!this.prop.isTrue && <Btn />} 报错的原因应该是你写成了 this.prop 而不是 this.props?

你的例子我写成了几个测试用例：4b871d8

[songkeys]

@yuche
不要意思，是我发在这里的 issue 打错了，项目中是写的 props。可以看下上面图中的报错，报的确实是 ... 'props' of undefined...。

看了一下测试用例，都没有问题。我这边编译完的 dist 文件也没有问题。但实际运行时会报错。

下面是我项目编译完的代码：

<block wx:if="{{!isLoggedIn}}"> // 报错
    <btn type="primary" __triggerObserer="{{ _triggerObserer }}" text="登录"></btn>
</block>

如果我直接修改 dist 文件，去掉逻辑运算符：

<block wx:if="{{isLoggedIn}}"> // 正常运行
    <btn type="primary" __triggerObserer="{{ _triggerObserer }}" text="登录"></btn>
</block>

稍等，我弄个最小重现确认一下不是其他的干扰之后再看看……

---

update:
发现有一个触发条件遗漏，最小重现是这样的：

父组件：

state = {
  test: false
}

componentDidMount() {
  this.setState({ test: true }) // 这一步是关键，如果不改变这个状态就没有关系
}

render() {
  return <View><Comp test={this.state.test} /></View>
}

子组件 Comp：

render() {
  return <View>{!this.props.test && <Btn />}</View>
}

应该没有别的干扰了，但我还没有完全抽离出来测验。如果还需要帮助，我可以提供一下重现这个故障的项目仓库……

[yuche]

@songkeys
应该和 #401 是同一个问题，我们正在看原因

[luckyadam]

@songkeys 可以试试 1.0.0-beta.2 哦

[songkeys]

1.0.0-beta.2:
试了一下。
在 JSX 中写 || 已经可以了。

关于 ‘props’ of undefined：
我新建了一个项目，复现了一下。之前还是说错了……遗漏的触发条件其实是嵌套的条件判断，行为有点奇怪，我都晕了，不知道咋形容了……

关于 defaultProps 都是 null：
情况是，一个 prop 如果在 render 中使用了，它就会变成 null。

两个测试可以看一下这个仓库：

git clone https://github.com/Songkeys/taro-demo.git

[songkeys]

1.0.0-beta.3:
当 map 渲染含有字符串模板时，提示：

https://github.com/Songkeys/taro-demo/blob/ac4557b9ade68597eb79be4237529d14816d1a32/src/pages/comp/comp.js#L9-L18

[songkeys]

1.0.0-beta.4:
值为 null 的字段通过 setState() 进入 state 后，变成空 object：

[Simbachen]

@songkeys null被转换成空对象 问题已定位到

[luckyadam]

#365

[songkeys]

升级到 beta.9 之后：

父页面：

render() {
  const { id } = this.$router.params
  return <Content userId={id} />
}

子组件：

  static defaultProps = {
    userId: null,
  }

  componentDidMount() {
    console.log(this.props.userId) // null
    setTimeout(() => {
      console.log(this.props.userId) // 正常
    }, 1000)
  }

而且这个情况出现在这个页面被推入的场景下，如果用开发者工具的编译模式直接打开这个页面，是不会出现问题的，估计是和 App 的生命周期又有影响了？

---

话说之前提过的直接用 <Content userId={this.$router.params.id} /> 传递页面参数的问题，也还没有修复。

---

另外不知道可不可以提供在自定义组件中便捷取到父页面实例的方法？之前的做法是 this.$scope，但现在 this.$scope 变成组件本身后，就没办法方便取到了。（因为目前页面参数的传递有点问题，另外更多的是想省一步传递 props。不过感觉这个需求不是很合理？）

目前的做法是：

在自定义组件中取当前页面实例：Taro.getCurrentPages()[Taro.getCurrentPages().length - 1].$component。
在自定义组件中取当前页面参数： Taro.getCurrentPages()[Taro.getCurrentPages().length - 1].$component.$router.params。

[yuche]

@songkeys 706f394 支持了 <Content userId={this.$router.params.id} />的用法。

其他问题我们还得再看看。

[luckyadam]

@songkeys
建议在父页面中这么传入子组件~

父页面：

componentWillMount() {
  const params = this.$router.params
  this.setState({
    id: params.id
  })
}

render () {
  return <Content userId={this.state.id} />
}

[joshua7v]

升级到1.0.0-beta.10
小程序好像依旧不支持this.props.children
target h5 没什么问题，小程序获取不到this.props.children

[MasonChow]

children使用方式有点问题

版本 1.0.0-beta.10

无效写法

const {children} = this.props
return <View>{this.props.children}</View>

有效写法

return  <View>{this.props.children}</View>

[songkeys]

@luckyadam
已经按你的建议改过了，beta.10 还是有之前提过的 页面被推入的场景下 state 获取不正常 的问题。

忘了是从哪个版本出现的这个问题了，前面beta几版还都是正常的。

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.