React.Children.map函数简单实现

发表于 | 分类于

React.children.map函数简单实现

  • 处理了children嵌套数组问题
  • 通过clone元素，处理了key问题（和React一致）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
export function ReactElement(type, key, ref, _self, _source, _owner, props) {
    const element = {
        $$typeof: REACT_ELEMENT_TYPE,
        type,
        key,
        ref,
        props,
        _owner,
        _source,
        _self
    }
    return element;
}

function childrenMap(children, callback) {
    var res = [];
    var indexObj = { index: 0 };//需要是个引用类型，值类型的话，递归函数内修改了，但是外边不知道，仍然以旧值循环
    traversalAll(children, res, indexObj, callback);
    return res;
}

function traversalAll(children, res, indexObj, callback, prefix = '') {
    if (!children) {
        return null;
    }
    if (Array.isArray(children)) {
        for (let k = 0; k < children.length; k++) {
            let spelator = prefix ? ':' : '.'
            let newPrefixName = prefix + spelator + k;
            traversalAll(children[k], res, indexObj, callback, newPrefixName);
        }
    } else {
        // console.log(`${prefix}`);
        var oldElement = children;
        var clonedElement = ReactElement(oldElement.type, prefix, oldElement.ref, oldElement._self, oldElement._source, oldElement._owner, oldElement.props);
        res.push(callback(clonedElement, indexObj.index++))
    }
}