React中的函数式插槽详解

更新时间：2023年11月06日 08:50:27 作者：萌萌哒草头将军

这篇文章主要为大家详细介绍了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函数式插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React
插槽

react+antd select下拉框实现模糊搜索匹配的示例代码
我们在开发过程中，经常会出现下拉框数据很多得情况，本文主要介绍了react+antd select下拉框实现模糊搜索匹配的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
浅谈React底层实现原理
本文主要介绍了浅谈React底层实现原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
一文详解React组件API
这篇文章主要介绍了React的组件API，及组件API的用法详解，文中有详细的代码示例，对学习或工作有一定的参考价值，感兴趣的同学可以阅读本文
2023-04-04
React获取Java后台文件流并下载Excel文件流程解析
这篇文章主要介绍了React获取Java后台文件流下载Excel文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06
一文详解如何React中实现插槽
这篇文章主要为大家详细介绍了如何在React中实现插槽，文中的示例代码讲解详细，对我们的学习或工作具有一定的借鉴价值，需要的可以了解一下
2023-03-03
React中Key属性作用
react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,本文主要介绍了React中Key属性作用,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
一文搞懂 React 18 中的 useTransition() 与 useDeferredValue()
这篇文章主要介绍了一文搞懂 React 18 中的 useTransition()与useDeferredValue()，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
React状态更新的优先级机制源码解析
这篇文章主要为大家介绍了React状态更新的优先级机制源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React虚拟渲染实现50个或者一百个图表渲染
这篇文章主要为大家介绍了React虚拟渲染实现50个或者100个图表渲染的实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
react-json-editor-ajrm解析错误与解决方案
由于历史原因,项目中 JSON 编辑器使用的是 react-json-editor-ajrm,近期遇到一个严重的展示错误,传入编辑器的数据与展示的不一致,这是产品和用户不可接受的,本文给大家介绍了react-json-editor-ajrm解析错误与解决方案,需要的朋友可以参考下
2024-06-06

React中的函数式插槽详解

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具