今天我们将学习如何使用 React 组件设置 HTML 样式。

我们页面的 HTML 代码将是：

我们有一个 id 为 root 的 div，一个 React、Reactdom 和 Babel 的脚本标签。

我们的 CSS 代码将是：

我们的 JS 代码将如下所示：

我们有 rootElement，它使用 id 为 root 的 div 和 variable element，它显示一个带有文本小框的 div。 最后，在 rootElement 中，我们渲染我们的元素。

现在，让我们给 div 一个类和一些内联样式，例如：

如果您运行此代码，您应该会看到与此类似的内容：

现在让我们添加两个额外的 div。

它将显示类似于：

如果你查看变量元素，你会注意到其中许多是重复的，例如名为 box 的类等。为此，你可以使用 react 组件。 让我们创建一个组件。

这里我们有一个 Box 组件，它接受 prop 对象 className、style 和 rest。 它返回一个带有类名框和我们指定的任何其他类名的 div。 使用 fontStyle 作为斜体的样式以及我们可以提供的任何额外样式 最后，rest 提供了我们提供给 div 的任何其他属性。

您还需要修改 JSX 代码：

我们正在使用我们的功能组件 Box 而不是 div 标签。 结果将与以前相同。

目前为止就这样了。

关注七爪网，获取更多APP/小程序/网站源码资源！