Skip to content

Commit

Permalink
docs: 更新文档关于 props 传入 JSX 说明
Browse files Browse the repository at this point in the history
  • Loading branch information
luckyadam committed Nov 15, 2018
1 parent 5b1ed51 commit 018f586
Showing 1 changed file with 51 additions and 1 deletion.
52 changes: 51 additions & 1 deletion docs/best-practice.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ title: 最佳实践
* [不能使用 Array#map 之外的方法操作 JSX 数组](https://github.com/NervJS/taro/blob/master/packages/eslint-plugin-taro/docs/manipulate-jsx-as-array.md)
* [不能在 JSX 参数中使用匿名函数](https://github.com/NervJS/taro/blob/master/packages/eslint-plugin-taro/docs/no-anonymous-function-in-props.md)
* [暂不支持在 render() 之外的方法定义 JSX](https://github.com/NervJS/taro/blob/master/packages/eslint-plugin-taro/docs/no-jsx-in-class-method.md)
* [不允许在 JSX 参数(props)中传入 JSX 元素](https://github.com/NervJS/taro/blob/master/packages/eslint-plugin-taro/docs/no-jsx-in-props.md)
* [不能在 JSX 参数中使用对象展开符](https://github.com/NervJS/taro/blob/master/packages/eslint-plugin-taro/docs/no-spread-in-props.md)
* [不支持无状态组件](https://github.com/NervJS/taro/blob/master/packages/eslint-plugin-taro/docs/no-stateless-function.md)

Expand Down Expand Up @@ -100,6 +99,57 @@ class Parent extends Component {

在微信小程序端是通过 `<slot />` 来实现往自定义组件中传入元素的,而 Taro 利用 `this.props.children` 在编译时实现了这一功能, `this.props.children` 会直接被编译成 `<slot />` 标签,所以它在小程序端属于语法糖的存在,请不要在组件中打印它。

### 支持 props 传入 JSX

支持 props 传入 JSX,但是元素传入 JSX 的属性名必须以 `render` 开头

例如,子组件写法

```javascript
class Dialog extends Component {
render () {
return (
<View className='dialog'>
<View className='header'>
{this.props.renderHeader}
</View>
<View className='body'>
{this.props.children}
</View>
<View className='footer'>
{this.props.renderFooter}
</View>
</View>
)
}
}
```

父组件调用子组件是传入 JSX

```javascript
class App extends Component {
render () {
return (
<View className='container'>
<Dialog
renderHeader={
<View className='welcome-message'>Welcome!</View>
}
renderFooter={
<Button className='close'>Close</Button>
}
>
<View className="dialog-message">
Thank you for using Taro.
</View>
</Dialog>
</View>
)
}
}
```

### 组件属性传递注意

不要以 `id``class``style` 作为自定义组件的属性与内部 state 的名称,因为这些属性名在微信小程序小程序中会丢失。
Expand Down

0 comments on commit 018f586

Please sign in to comment.