在React.js中存储基于文本的长段落或标题

Question

我想知道如何在React.js中以语义良好的方式存储基于文本的长html元素，如<p>, <h1>, <h2>, <h3>等。通过研究react.js文档，我了解到我们可以将react中的元素存储在变量中。

const title = <h2>Branding changed the game in my life, and I'm excited for it to do the same for you, too. </h2>;

<div className="flex-container">
   <h2>{title}</h2>
   <p>{me}</p>
</div>

我上面提出的可以被认为是正确的？有没有更优雅的方式来写上面的代码？

Answer 1

上面的代码将在h2中呈现一个h2。这也是JSX的一个特性，不一定是React本身。我建议将字符串本身存储在变量中，独立于任何标记。

首先，你必须问自己为什么要这么做。最具语义性的事情是将所有内容都写成JSX，而不是抽象为变量，除非需要。

Answer 2

您所做的是不正确的，因为您正在将一个h2放入另一个h2中。“我”也没有定义。

在一个典型的应用程序中，"title“和"me”将作为pops传入，以便您正在编写的组件保持可重用。

<div className="flex-container">
   <h2>{props.title}</h2>
   <p>{props.me}</p>
</div>

层次结构中的另一个更高的组件可以定义

const title = "Branding changed the game in my life, and I'm excited for it to do the same for you, too.";
const me = "Some text";

并将它们作为道具传递给可重用组件

<MyComponent title={title} me={me} />

这只是一个简单的例子。通常情况下，这些文本来自数组等数据结构。

Answer 3

所有这些方法都是正确的

import React from "react";
import "./style.css";

const shortText = "This is a short text";

const shortTextBis = <p>This is a short text</p>;

const shortTextQuote = `I'm happy`;

const longText =
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam lorem in sodales cursus. Vivamus non quam vitae ipsum lacinia volutpat. Cras nec placerat ante. Nullam vitae leo ultrices, auctor sem ut, ullamcorper nunc. Mauris in massa orci. Suspendisse potenti. Vivamus fermentum augue vel eros tempor, vitae pulvinar dolor sagittis.";

const textH2 = <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam lorem in sodales cursus. Vivamus non quam vitae ipsum lacinia volutpat.</h2>;

const textH2Bis = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam lorem in sodales cursus. Vivamus non quam vitae ipsum lacinia volutpat.'

export default function App() {
  return (
    <div>
      <p>{shortText}</p>
      {shortTextBis}
      <p>{shortTextQuote}</p>
      <p>{longText}</p>
      {textH2}
      <h2>{textH2Bis}</h2>
    </div>
  );
}

演示：stackblitz