React：具有渲染道具模式的可重用组件

React：具有渲染道具模式的可重用组件

构建高度可重用的组件并避免代码重复。

如果您像我一样一直在使用 ReactJS 创建一些应用程序，那么您比任何人都更了解我们在涉及组件的过程中遇到的困难。它们的主要功能是使我们的代码更可重用，从而更简洁。

问题是这并不总是可行的，我已经记不清有多少次我不得不在组件之间复制代码以满足小的需求，例如布局更改。而在那些时刻，用户渲染道具是一个不错的选择。

好的，但是什么是渲染道具？ 它只是一个传入的函数 组件的属性，这些属性决定了它将呈现什么。

好了，就是这样，现在让我们进入代码。

上面的代码是一个计数器，它在一段时间内递增 +1，旨在为值设置动画。

现在考虑以下情况：我必须为我的系统中的几个地方设置动画，但是，在每个地方，风格化和使用都不同。为每个需要创建一个组件会产生大量重复的代码和不必要的工作，我也不想将它挂接到 styled-components 的 styled() 函数中。使用渲染道具，我能够隔离计数器逻辑，同时使其界面具有延展性。

这是最终结果：

就这么简单，我将 Javascript 函数作为属性传递（ 打回来 ) 返回一个 ReactNode 并在 Our Countup 中执行它。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/1482/02152916