5 分钟搞定一个 React 组件

2020年11月2日2020年12月25日

由 admin

作者 | 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>
  )
}