React学习总结6--children

demos源码
每个组件都可以获取到 props.children。它包含组件的开始标签和结束标签之间的内容。

react提供了一系列的方法来方便处理children。

• map
• forEach
• count,
• toArray
• only

实际应用

在实际项目中的应用，我们可以对默认的children进行增加处理来达到我们的目的。很多的UI组件就使用了这个属性。
antd的Button组件：

<Button type="primary">Primary</Button>

最终实现效果：

<button type="button" class="ant-btn ant-btn-primary"><span>Primary</span></button>

模拟实现：

import React, { Component } from "react";
import PropTypes from "prop-types";
import classNames from "classnames";

import("./index.css");

const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
function isString(str) {
    return typeof str === "string";
}

function insertSpace(child, needInserted) {
    if (child == null) {
        return;
    }
    const SPACE = needInserted ? " " : "";
    if (
        typeof child !== "string" &&
        typeof child !== "number" &&
        isString(child.type) &&
        isTwoCNChar(child.props.children)
    ) {
        return React.cloneElement(
            child,
            {},
            child.props.children.split("").join(SPACE)
        );
    }

    if (typeof child === "string") {
        if (isTwoCNChar(child)) {
            child = child.split("").join(SPACE);
        }
        return <span>{child}</span>;
    }
    return child;
}

class Button extends Component {
    static defaultProps = {
        htmlType: "button",
        type: "default"
    };

    static propTypes = {
        type: PropTypes.string,
        className: PropTypes.string
    };

    handleClick = e => {
        const { onClick } = this.props;
        if (onClick) {
            onClick(e);
        }
    };

    render() {
        const { type, className, children, htmlType, ...rest } = this.props;
        const kids = insertSpace(children, true);
        const classes = classNames("ant", className, {
            [`ant-${type}`]: type
        });

        const buttonNode = (
            <button
                type={htmlType}
                className={classes}
                onClick={this.handleClick}
                {...rest}
            >
                {kids}
            </button>
        );

        return buttonNode;
    }
}

export default Button;

import React, { Component } from 'react';
import Button from './Button';

class ChildrenCom extends Component {
  render() {
    return (
      <div>
        <Button type="primary">添加</Button>
        <Button onClick={(e) => {alert(e)}}>删除</Button>
      </div>
    )
  }
}

export default ChildrenCom;

上边实现过程中使用了React.cloneElement,使用方法如下：

React.cloneElement(
  element,
  [props],
  [...children]
)

const {children,...otherPorps}=this.porps
React.Children.map(children,child=>{
    React.cloneElement(child,otherPorps)
})