React 使创建复杂的交互式应用程序成为一个相对轻松的过程。它通过偏离 Vanilla JavaScript 对命令式编程的使用来实现这一点,这需要开发人员告诉 JavaScript what 渲染和 how 渲染它。 React 利用声明式编程来处理底层渲染的方式,这让开发人员可以自由地专注于应用程序可以做什么。

不过,就像大多数好东西一样,React 的便利是有代价的,而且这个代价是迂腐的。 React 要求开发人员遵守高句法标准,作为交换,它在 DOM 方面做了一些肮脏的工作。如果不符合其标准,React 将通过引发错误来抱怨。让我们考虑下面的例子:

function MyBrokenComponent() {
    return (
        <h1>Beware!</h1>
        <p>I will return an error</p>
    )
}

进入全屏模式 退出全屏模式

在这个例子中,我们告诉 React 当MyBrokenComponent被其父组件渲染时返回一个h1元素和一个p元素。这将导致以下错误:

这个错误告诉我们 React 无法渲染具有多个父元素的组件。我们收到此错误是因为 React 要求将 return 语句包装在父元素中,而上面的 return 语句不满足此要求。让我们看另一个例子:

function MyOtherBrokenComponent() {
    return (
        <p>Try again!</p>
        <p>I will also return an error</p>
    )
}

进入全屏模式 退出全屏模式

此示例将导致与我们之前的示例相同的语法错误。虽然我们的 return 语句只包含了一种元素p,但它仍然包含两个元素,因此不符合 React 的单亲标准。让我们检查一个不会返回错误的示例:

function MyWorkingComponent() {
    return (
        <div>
            <h1>You're in the clear!</h1>
            <p>I will not return an error</p>
        </div>
    )
}

进入全屏模式 退出全屏模式

将我们的无错误组件与之前的示例进行比较时,很明显MyWorkingComponent具有其他组件所缺乏的东西:一个父元素。在这种情况下,与许多其他情况一样,该父元素是div。将元素包装在一个父元素中使 React 能够理解我们的声明性语句,并且使用divs 可以让开发人员轻松确保满足 React 的语法需求。

虽然divs 是修复语法的有用工具,但它们并不是我们作为开发人员可以使用的唯一工具。让我们考虑以下两个示例:

function MyDivlessComponent() {  
    return <p>I will not return an error either!</p>
}

进入全屏模式 退出全屏模式

function MyHappyComponent() {
    <div>
        <h1>Divs</h1>
        <h2>keep</h2>
        <p>React</p>
        <p>happy!</p>
    </div>
}

进入全屏模式 退出全屏模式

我们的第一个组件MyDivlessComponent有一个工作返回语句,但没有div。怎么会这样?嗯,div只是父组件的一个例子。遵循 React 严格的语法规则的关键是将 return 语句中的所有内容都包含在一个框或父元素中。在MyDivlessComponent的情况下,我们的父元素是没有任何子元素的p元素。另一方面,MyHappyComponent包含 4 个子元素,因此需要一个父元素来包裹这些子元素。

了解新框架的来龙去脉可能很棘手,但divs 为开发人员提供了对 React 最常见错误之一的简单修复。