使用.join方法换行

Question

我是reactjs新手，我正在尝试加入其中，但我想在每个Hello大陆之后休息一下。

<br />

和

\n

不起作用。

br

标签可以在常规 js 中工作，但不能响应。 我要找的是

你好非洲

你好美国

等等

我得到的是你好非洲你好美国等

const continents = ['Africa','America','Asia','Australia','Europe'];
const helloContinents = Array.from(continents, c => `Hello ${c}!`);
const message = helloContinents.join("<br />");
const element = (
 <div title="Outer div">
  <h1>{message}</h1>
</div>
);

Answer 1

我尝试了你的代码，你得到的是

Hello Africa!<br />Hello America!<br />Hello Asia!<br />Hello Australia!<br />Hello Europe!

因为您的代码正在生成单个

<h1>

元素，其中包含连接的

helloContinents

消息，并用

<br />

分隔，但此

<br />

标记将被视为纯文本，不会在 React 中呈现为换行符。

为了解决这个问题，我建议您确保

<br />

标签被视为实际的 HTML 元素。

这里有一个例子：

const continents = ["Africa", "America", "Asia", "Australia", "Europe"];
  const helloContinents = continents.map((c, index) => (
    // creating all html elements to render
    <React.Fragment key={index}>
      Hello {c}!<br />
    </React.Fragment>
  ));

  return (
    <div title="Outer div">
      <h1>{helloContinents}</h1>
    </div>
  );