React顶层API

1.React.children.map(props.children, mapFunc)

1）该方法用于安全的遍历组件children。

2）该方法可以平铺嵌套数组的返回值。

import React from 'react';
import ReactDOM from 'react-dom';

function User(props) {
    // props.children取值有三种：
    // 1.无子节点-undefined
    // 2.一个文本/元素-字符串或者对象
    // 3.多个节点-数组
    // 所以使用map可能会有问题，但是React.Children.map解决了这个问题
    return (
        <>
            {
                React.Children.map(props.children, (item,index) => <div key={index}>{item}</div>)
            }
        </>
    )
}

ReactDOM.render(
    <User>
        1 
    </User>, window.root)

 2.React.Fragment

用于class组件返回多个并列的元素。不想额外添加div等。

render() {
    return (
        <React.Fragment>
            <div>1</div>
             <div>2</div>
        </React.Fragment>
    )
}

还可以用简写形式<></>;或者[,,,,]

转载于:https://www.cnblogs.com/lyraLee/p/11557798.html