Question

每当我试图运行到代码线下, 它不执行 < br/ > 作为断线, 但实际上执行为字符串。

const firstFiveLetters = chartData.centerText.slice(0, 5);
const remainingLetters = chartData.centerText.slice(5);

// Return the text with line break after the first five letters
return `${firstFiveLetters}<br>${remainingLetters}`;

我期待执行第一个但不能执行的 html 元素后出现断线。

Answer 1

我认为问题在于您没有将 < code> fifelletters 转换为 HTML, 所以它被检测成字符串 ;

const firstFiveLetters = chartData.centerText.slice(0, 5);
const remainingLetters = chartData.centerText.slice(5);
//Render the variable with the desired content as HTML using __html:
const htmlString = `${firstFiveLetters}<br>${remainingLetters}`;
return { __html: htmlString };

Answer 2

您的方法返回字符串, 而不是反应元素, 这就是为什么线断转换为字符串。格式化文本的重新反应方式将看起来类似 :

const firstFiveLetters = chartData.centerText.slice(0, 5);
const remainingLetters = chartData.centerText.slice(5);

return (<>{firstFiveLetters}<br />{remainingLetters}</>);

您可以在此情况下看到, 我们将返回 React 节点, 而不是字符串。您甚至可以为这种格式化创建组件。

function LineBreakTextFormat({ text, first = 5 }) {
  const start = text.slice(0, first);
  const remaining = text.slice(first);
  return (
    <>
     {start}
     {!!remaining && <><br />{remaining}</>}
    </>
  );
}

// And then use it like this
<LineBreakTextFormat text={chartData.centerText} first={5} />

友情链接