常被忽略的React Children用法

前言

在使用React组件时，经常用到props和Children传递数据给子组件，其中最常用的是：父组件传递元素给子组件，子组件用Children来渲染，但是Children还有一些其他的用法，下面总结一下。

一  常用用法

父组件传递元素给子组件

// 子组件
function Child({ children }) {
    return (
        <div className="child">{children}</div>
    )
}   
// 父组件
function Parent() {
    return (
        <Child>
            <span>Hello, world.</span>
        </Child>
    )
}

二 将对象作为Children传入

// 子组件
function Child({ children }) {
    return (
        <div className="child">
            {children.firstName}, {children.lastName}
        </div>
    )
}   
// 父组件
function Parent() {
    const user = {
        firstName: 'Hello',
        lastName: 'world'
    }
    return (
        <Child>
            {user}
        </Child>
    )
}

三  将函数作为Children传入

我们以一个ToDoList为例：

// 子组件
function Child({ todos, children }) {
    return (
        <ul>
            {
                todos.map((item, index)=> (
                    <li key={index}>{children(item)}</li>
                ))
            }
        </ul>
    )
}

// 父组件
function Parent() {
    const todos = [
        { label: '任务一', status : 'done' },
        { label: '任务二', status : 'progress' },
        { label: '任务三', stat us: 'done' }
    ];
    const isCompleted = todo => todo .status === 'done';
    return (
        <Child todos={ todos }>
            {
                todo => isCompleted(todo) ? <b>{ todo.label }</b> : todo.label
            }
        </Child>
    )
}

最后

上面第二和第三种用法就是常常被我们忽略的Children用法，希望对你有所帮助。

博客原文《常被忽略的React Children用法》

文章内容部分参考于《React模式》