如何在 javascript object 中编写 html 标签

Question

我正在尝试创建一个多语言网站，因此我正在使用对象和 arrays 来实现这一目标，但是，我想在 js 对象中添加 span 标签。 我尝试了反引号，但它不起作用

let content = {
    english:{
        title:"Welcome to G-tech",
        text:'is an Electronics repair shop specializing in Computer, Phone, and Tablet repairs.',
        button:"mail-in"
    },
    francais:{
        title: 'Welcome to G-tech',
        text:'Il s'agit d'un atelier de réparation d'appareils électroniques spécialisé dans la réparation d'ordinateurs, de téléphones et de tablettes. ',
        button:"mail-in"
    },
    arab:{
        title: 'g-tech مرحبا بكم في ',
        text:'هو خدمة لتصليح الهواتف والحواسيب '
        button:"mail-in"
    }
}

Answer 1

您可以简单地添加标签而无需任何backticks或任何其他东西。 在反应中，您可以将JSX Elements保存为字符串、数字、etc。 因为 JSX 元素是 React 应用程序的一部分。 所以我想添加span标签到你的文本属性并不难。

function MultiLingualParagraphs() {
  const [multiLingualData, setMultiLingualData] = useState([
    {
      language: "English",
      title: "Welcome to G-tech",
      text: (
        <span>
          is an <strong>Electronics</strong> repair shop specializing in
          Computer, Phone, and Tablet repairs.
        </span>
      ),
      button: "mail-in"
    },
    {
      language: "francais",
      title: "Welcome to G-tech",
      text: (
        <span>
          Il s'agit d'un <strong>atelier</strong> de réparation d'appareils
          électroniques spécialisé dans la réparation d'ordinateurs, de
          téléphones et de tablettes.
        </span>
      ),
      button: "mail-in"
    },
    {
      language: "Arabic",
      title: "g-tech مرحبا بكم في ",
      text: (
        <span>
          هو خدمة لتصليح الهواتف والحوا<strong>سيب</strong>
        </span>
      ),
      button: "mail-in"
    }
  ]);

  return multiLingualData.map((v, i) => (
    <div className="App">
      <h2>{v.language}</h2>
      <hr />
      <h4>{v.title}</h4>
      <p>{v.text}</p>
      <button>{v.button}</button>
      <hr />
    </div>
  ));
}

你可以在这个CodeSandbox上看到这个工作演示。

要了解有关 JSX Elements 和Babel 编译器的更多信息。 检查此链接。