156、react插槽示例

示例一：
import React from 'react';
import { Fragment, Component } from 'react';
import { connect } from 'react-redux'
import './index.scss'
import { Icon, Button } from 'zent'
class Pop extends Component {
  constructor(props) {
    super(props);
    this.state = {}
    this.renderChild = this.renderChild.bind(this)
  }
  render() {
    return (
      <Fragment>
        <div className="pop-wrap">
          <div className="pop-header">
            <span className="left">{this.props.popTitle}</span>
            <Icon className="right" type="close" />
          </div>
          <div className="pop-content">
            {Array.isArray(this.props.children) ?
              this.props.children.map((child) => {
                return this.renderChild(child)
              }) : this.props.children && this.renderChild(this.props.children)}
          </div>
          <div className="pop-footer">
            <Button.Group>
              <Button size="small" className="cancel">取消</Button>
              <Button size="small" type="primary" className="confirm">确定</Button>
            </Button.Group>
          </div>
        </div>
      </Fragment>
    )
  }
  renderChild(child) { // 控制内容的分发
    if (child.props.left) {
      return <div className="left" key="left">{child}</div>
    } else if (child.props.right) {
      return <div className="right" key="right">{child}</div>
    } else if (child.props.center) {
      return <div className="center" key="center">{child}</div>
    }
  }
}
const mapStateToProps = (state) => {
  return {
  }
}
const mapDispatchToProps = (dispatch) => {
  return {}
}
export default connect(mapStateToProps, mapDispatchToProps)(Pop)
引用子组件
  < pop popTitle = "请选择参与考勤部门" >
    <div left="true">左侧内容</div>
    <div right="true">右侧内容</div>
    <div center="true">中心内容</div>
</pop >

示例二：
var Children = React.createClass({
  render() {
    return (
      <ul>
        {
          React.Children.map(this.props.children, function (item) {
            return <li>{item}</li>
          })
        }
      </ul>
    )
  }
});
ReactDOM.render(<Children>/*向类传参执行，这里获取返回值，渲染到页面*/
  <span>大毛</span>
  <span>五毛</span>
  <span>一块</span>
</Children>, document.getElementById('app'));