React 中的内联样式

React 是一个基于 JavaScript 的库，可以在我们的 Web 应用程序中创建可重用的组件。我们可以自定义组件的功能和视觉外观。

我们可以使用这些组件作为构建块来构建强大、功能强大的 Web 应用程序。

React 应用程序是用 JSX 编写的，这是一种类似于 HTML 的模板语言，但允许 Web 开发人员在标记结构中使用 JavaScript。JSX 在许多方面与 HTML 类似，但存在细微差别。

与 HTML 一样，你可以在 JSX 中编写内联样式，但有一个很大的区别：样式必须表示为一个对象，而不是一个简单的字符串。

本文将探讨在 React 中应用内联样式的不同方法。

React 中的内联样式

Web 开发人员尚未确定哪种方式是在 React 中设置组件样式的最佳方式。有些人喜欢使用像 SCSS 这样的预处理器，有些人喜欢坚持使用常规 CSS，但即使在这个阵营中也存在差异。

一些 React 开发人员喜欢将所有样式保存在一个 CSS 文件中，而另一些开发人员则希望为每个组件使用单独的样式表。使用外部样式表的缺点是很有可能你最终会用完唯一的描述性类名称。

幸运的是，你可以将内联样式直接应用于组件，因此无需为它们创建单独的类名。内联样式也解决了简单的问题。

React 开发人员不必查看长样式表来使用内联样式更改元素的样式。使用内联样式，CSS 和 JavaScript 是相互关联的。

React 中内联样式的使用

正如我们之前提到的，要在 JSX 中应用内联样式，它们必须写成一个对象。如果你将 JavaScript 对象（或任何 JavaScript 表达式）作为值传递给 style 属性，则它必须用花括号括起来。

打开和关闭花括号也用于定义对象，所以如果你看一下 React 中内联样式的简单定义，它看起来像双花括号：

export default function App() {
    return (
        <div>
            <h1 style={{color: "red"}}>Hello CodeSandbox</h1>
        </div>
    );
}

在 React 中为内联样式添加条件

然而，包裹在 style 对象上的花括号 {} 允许我们做的不仅仅是传递一个 JavaScript 对象。我们还可以使用三元运算来根据状态值应用样式并允许用户更改该值。

最简单的例子是打开/关闭夜间模式。我们来看一个例子：

import { useState } from "react";
export default function App() {
    const [nightmode, setNightMode] = useState(false);
    return (
        <div
            style={{
                backgroundColor: nightmode ? "black" : "white",
                color: nightmode ? "white" : "black"
            }}
            >
            <h1>Hello, Dear Users</h1>
            <input
                type="checkbox"
                name="nightmode"
                onChange={() => setNightMode(!nightmode)}
            />{" "}
            Turn on night mode
        </div>
    );
}

你可以在 CodeSandbox 上查看演示，看看它是如何工作的。

这是一个简单的应用程序，带有一个带有文本的 div 和一个复选框。选中和取消选中复选框会使应用程序在夜间模式和灯光模式之间来回切换。

我们首先导入 useState() 挂钩，这对于根据用户输入更新状态值至关重要。然后我们创建两个变量：nightmode 和 setNightMode。

前者将存储状态变量本身，而后者将通过 useState 钩子分配一个更新函数。最后，我们将状态变量的默认值设置为 false。

然后，我们得到 div 元素的 style 对象，它有两个属性：backgroundColor 和 color。

在我们继续之前，请注意 CSS 属性的传统名称是 background-color，但在 JavaScript 中，两个词被压在一起，并且是驼峰式的。这是在 React 中编写内联样式的约定。

这些属性的值是三元运算符。两者都检查 nightmode 变量的值。

如果为真，则 backgroundColor 采用 black 的值；否则，该值将是白色。由于我们将状态值设置为 false，因此默认情况下背景颜色为白色。

然后我们有 color 属性，它设置值使它们与背景相反，以确保文本和背景颜色具有高度的对比度。

每次用户勾选和取消勾选复选框时，onChange 事件处理程序都会翻转状态值。有了这个，我们有一个简单的例子来说明如何使用内联样式有条件地改变元素的外观。

对象引用作为 React 中的内联样式

在这种情况下，我们的 style 对象相对简单，并且不会影响代码的可读性。然而，想象一下如果我们有几十种 div 元素的样式。

如果你写出所有样式，则代码将占用比所有其他元素更多的空间。在这种情况下，将对象移到 return 语句之外并引用它是明智的。

基于上面的示例，代码将如下所示：

import { useState } from "react";
export default function App() {
    const [nightmode, setNightMode] = useState(false);
    const divStyle = {
        backgroundColor: nightmode ? "black" : "white",
        color: nightmode ? "white" : "black"
    }
    return (
        <div
            style={divStyle}
            >
            <h1>Hello, Dear Users</h1>
            <input
                type="checkbox"
                name="nightmode"
                onChange={() => setNightMode(!nightmode)}
            />{" "}
            Turn on night mode
        </div>
    );
}

这样，JSX 代码看起来就不那么混乱了。