如何在react对象中编写html标记

Question

我正在尝试创建一个多语言网站，因此使用对象和数组来实现这一点。然而，我想在react对象中添加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或任何其他东西。在react中，您可以将JSX Elements保存为字符串、数字等。因为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元素和Babel编译器的更多信息。检查此链接。