react
通过实现一个切换组件我们来深化一下对 React 理解，我们的研究是从一个示例开始，创建一个切换的按钮来切换部分内容显示和隐藏。
创建一个 button 作为操作切换状态的触发器。
定义状态 state，页面有两个状态分别是
- on:true 显示内容
- on:false 隐藏内容
通过更新状态 state 来更新界面，状态更新了会更新 dom 。
state = {
on:false,
}
定义 toggle 方法主要用于负责更新 state 中 on 的值来控制页面状态，隐藏/显示界面
toggle = () => {
this.setState({
on:!this.state.on
})
}
简单实现
{
this.state.on && (
Zidea
)
}
import React, { Component } from 'react'
export default class Toggle extends Component {
state = {
on:false,
}
toggle = () => {
this.setState({
on:!this.state.on
})
}
render() {
return (
{
this.state.on && (
Zidea
)
}
)
}
}
const toggleStyle = {
background:"blue"
}
我们的控制要显示或隐藏内容是不是一层不变的，为更灵活的考虑，可能控制内容根据不同情况（场景）会有所不同，我们将这部分内容作为 children 参数传入来提供组件复用性。
render() {
return (
{
this.state.on && (
this.props.children
)
}
)
}
angular basic tut
Render props
从字面上不难理解为 render 的属性传入组件，来控制渲染。
render() {
return (
(
tut list
)}/>
)
}
然后我们通过 props 方法到作为 props 传入的参数来使用，可以调用 render 函数将界面渲染出来。
render() {
const { render} = this.props;
return (
{render()}
)
}
既然 render 函数，是不是可以将参数参入函数来使用呢？当然没有问题，我们可以尝试在组件内部来控制组件显示。
(
{str}
)}/>
这样就顺利将 hello zidea 显示到我们的界面上了。
render() {
const { render} = this.props;
return (
{render('hello zidea')}
)
}
既然可以可以传参数，那么也可以传入一个对象进入界面。
{render({
on:this.state.on,
toggle:this.toggle
})}
这样我们 render 方法就可以接收到组件内部 state 和 toggle 方法来控制行为，这样就将功能和界面成功进行分离来实现更灵活的效果。
render() {
return (
(
{
on && Hey zidea
}
)}/>
)
}
其实这里 render 我们给其任意名称，render 只是一个名称而已，既然这样我们可以可以用 children ,children 使我们的固有函数
render() {
const { children } = this.props;
return children({
on:this.state.on,
toggle:this.toggle
})
}
render() {
return (
{ ({on,toggle}) => (
{on && Zidea React
}
)}
)
}
import React, { Component,Fragment } from 'react'
在 react 新特性中提供 Fragment 。
render() {
return (
{ ({on,toggle}) => (
{on && Zidea React
}
)}
)
}
avascript