5 分钟搞定一个 React 组件

5 分钟搞定一个 React 组件
作者 | Juan Curti
译者 | 王强
策划 | 李俊辰

几年前,当我第一次踏入 React.js 环境时,迎面而来的是许多名称各异的概念。其中之一叫做高阶组件(HOC),它无疑是我最喜欢(和最常用)的特性之一。

正如 React 官方文档所说:

高阶组件(HOC)是 React 中重用组件逻辑的高级技术。HOC 本身不是 React API 的一部分。它们是从 React 的天然组合形式中产生的一种模式。

具体而言,高阶组件是接收组件并返回新组件的函数

React 使用 HTML 来构建我们应用程序的 UI。我们可以用 HOC 来扩展这一功能,这样除了<div>、<p>和<h1>外,我们还可以使用<Menu>、<NavigationBar>和<Carousel>这样的自定义组件。高阶组件还允许我们向这些组件发送参数,也就是我们自定义的参数。<NavigationBarisLogged={}/>就是一个基础的例子。

创建第一个组件

作为最简单的示例,我们将构建一个使用 color 参数的容器。我们能重用这个可上色的容器,并在其上设置不同的颜色。

我更喜欢将组件保存在单独的 components 文件夹中。我会转到自己的 components 文件夹,然后创建一个名为 ColorableContainer.js 的新文件。
import React from 'react';

export default class ColorableContainer extends React.Component {

    render() {
        return (
            <div className='colorableContainer' style={{ backgroundColor: this.props.backgroundColor}} >
                {this.props.children}
            <style jsx>{`
                .colorableContainer {
                    width: 100%;
                    height: 40px;
                }
            `}</style>
            </div>
        )
    }
}
现在我们在做什么?

我们正在创建一个扩展 React.Component 的类(ColorableContainer),因为我们想把这个类用作组件。

在渲染函数中,我们将返回具有两种类型样式的一个 div:

  • style jsx:定义静态变量的宽度和高度。

  • Inline styling:动态检测我们的 props 值以设置背景颜色。我们使用 this.props 来访问将要发送的参数()。

最后,我们将所有这些都包装到 this.props.children 中。这个值指向将与我们的组件包装在一起的组件。
<Component>
  ...(children)...
</Component>
现在可以使用我们的组件了。我们可以导入它并用它定义背景颜色,并加入添加内部元素的功能。这只是一个基础的方法,所以我们定义的是固定的高度,但你可以看到它的定制空间是非常大的。现在我们可以导入它:
import ColorableContainer from '../components/ColorableContainer';

这就可以把它当新组件来用了。

请注意,以下代码来自一个 Next.js 项目,因此可能与 react.js 项目有所不同。
import ColorableContainer from '../components/ColorableContainer';
export default function Home() {
  return (
    <div>
      <ColorableContainer backgroundColor={'rgb(0,255,0)'}/>
      <ColorableContainer backgroundColor={'red'}>
          <p>Test</p>
        </ColorableContainer>
        <style jsx>{`
            p {
              margin: 0;
            }
        `}</style>
    </div>
  )
}

编译时,我们将找到 2 个容器。一个的背景颜色是绿色(RGB 定义),没有内部内容,另一个是红色背景,定义为简单的“red”和一个内部段落。

5 分钟搞定一个 React 组件我们的 HOC ColorableContainer 的结果

    小结    

本文介绍了制作高阶组件的基础快速入门。这本身就是一个热门话题,而且 React 团队正在不断更新和添加新功能。我今后的文章辉涉及更多关于 HOC 的信息,以及它可以实现的功能(Composition、enhancements 和 refs)。

延伸阅读

https://juancurti.medium.com/building-your-own-react-components-in-5-minutes-updated-2020-d3ff4e61f009

5 分钟搞定一个 React 组件

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关