React中的函数式插槽详解
作者：萌萌哒草头将军
这篇文章主要为大家详细介绍了React 开发中遇到的具名插槽的函数用法,文中的示例代码讲解详细,具有一定的学习价值,有兴趣的小伙伴可以了解一下
朋友们，好久不见，最近搬家，通勤时间从1小时变成三小时，花了一两个月终于适应了，所以有空我又来更新文章了，今天分享 React 开发中遇到的具名插槽的函数用法
你可能见过下面的写法。通常情况下，我们都会使用 children 属性实现类似Vue的默认插槽功能。
const Component = ({ value, children }) => {
return <>
{value}
{children}
</>
}
function App() {
return <Component value="hello">world</Component>
}
上面使用了隐藏的 children 属性，我们可以显示的指定它
function App() {
return <Component value="hello" children="world" />
}
children 属性默认是 jsx 表达式，不是时，需要做额外的解析，否则会报错
但是当 children 属性是函数时，就会发生质的变化。
const Component = ({value, children}) => {
return <>{children(value)}</>
}
const renderChildren = (value) => {
return value.join('--')
}
function App() {
return (
<Component
value={["hello", 'world']}
children={renderChildren}
/>
)
}
显示的指定 children 属性时，相当于具名插槽，所以我们未必需要使用 children 字段，或许你可以使用reader更合适
如果你不喜欢显示的声明 children 属性，那么可以这么写：
function App() {
return (
<Component value={["hello", 'world']}>
{(value) => {
return value.join('--')
}}
</Component>
)
}
这种写法似乎有点熟悉，没错，React 官方也这么干过，你来看看这个例子。
const Context = createContext({name: '萌萌哒草头将军'});
export const Provider = Context.Provider;
export const Consumer = Context.Consumer;
// 你的组件，假设已经被 Provider 包裹了
function Component() {
return (
<Consumer>{
({ name }) => <h1>name: { name }</h1>
}</Consumer>
);
}
相似的还有一些第三方库，比如 antd 的 <Form.List />。这里就不一一举例子了。
虽然这种写法看起来很奇怪，但是可以极大地提高组件的灵活性。或者说，这是一种超级加强的插槽写法。因为，我们可以在组件外自定义渲染逻辑。
到此这篇关于React中的函数式插槽详解的文章就介绍到这了,更多相关React函数式插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！