如何在 reactjs 中的字符串插值内给出 html 标签？

Question

我有

const getConfirmMsg= (card, isDelete) => {
       const valueType = getValue(card);
    
        const confirmMessage = isDelete ? (
              `You are about to delete the ${valueType}.This is the last value.`
          ) : (
            `All selected values will be removed.`
          );

return (
tr(confirmMessage, {valueType}
);}

我希望 ${value Type} 为斜体，并在第二行之前换行。

Answer 1

你可以这样做：

const confirmMessage = isDelete ? (
  <p>
    You are about to delete the <em>{valueType}</em>.
    <br />
    This is the last value.
  </p>
  ) : (
    `All selected values will be removed.`
  );

Answer 2

不完全确定我理解你的问题，但如果你需要在字符串中呈现 html 标签，你将需要一个降价库，我建议使用 react-html-parser.

用法：

import ReactHtmlParser from "react-html-parser";

ReactHtmlParser(`You are about to delete the ${valueType}.This is the last value.`)

Answer 3

我喜欢这个，现在翻译工作正常。因为我正在开发多语言应用程序。需要翻译。

const getConfirmMsg= (card, isDelete) => {
       const valueType = getValue(card);
    
        const confirmMessage = isDelete ? (
              <>
              <p>{tr(`You are about to delete the`)} <i>{tr( valueType)}</i> .
              </p>
              <p>{tr(` This is the last value.`)}</p>
              </>
          ) : (
            tr(`All selected values will be removed.`)
          );

return (confirmMessage);
};

如何在 reactjs 中的字符串插值内给出 html 标签？

How to give html tags inside string interpolation in reactjs?

reactjs

string-interpolation