如何在 React 中逐步构建 HTML？答案

【问题标题】：How can I build HTML gradually in React?如何在 React 中逐步构建 HTML？
【发布时间】：2020-02-24 03:23:41
【问题描述】：

我正在尝试以以下格式构建一些 HTML：

<h1>Title</h1>
<p>
  Always existing sentence. Optional sentence.<br/>
  Always existing sentence. Optional sentence.
</p>
<p>
  <span>Always existing span</span>
  <span>Optional span</span>
</p>

构建/渲染它的最佳方式是什么？我得到的最近的是一些 JSX：

const title = <h1>Title</h1>
const line1 = [`Always existing sentence.`];
const line2 = [`Always existing sentence.`];

if (condition) {
  line1.push(`Optional sentence.`);
  line2.push(`Optional sentence.`);
}
const para1 = React.createElement('p', null, [line1.join(' '), line2.join(' ')].join('<br/>'));

const spans = [React.createElement('span', null, `Always existing span`)];
if (condition2) {
  spans.push(React.createElement('span', null, `Optional span`));
}

const para2 = React.createElement('p', null, spans.join('<br/>'));

return <>{title}{para1}{para2}</>;

这与呈现为<p>[object Object]<br/>[object Object]</p> 的最后一段不同。我假设因为跨度是 ReactElements。但我不知道如何join()他们。或者即使这是最好的方法。
那么，逐步构建 HTML 以在 React 中呈现的最佳方法是什么？

【问题讨论】：

标签： html reactjs jsx

【解决方案1】：

我相信您正在寻找的是 JSX 的条件渲染。您对伪代码有正确的想法，您只需将 if (condition) 更改为检查状态变量的值。不清楚您使用的是类语法还是钩子，所以为了简单起见，我将提供一个使用钩子的示例。无论您使用哪种语法，同样的想法都适用。

每当 React 中的状态发生变化时，组件都会重新渲染。 showOptionalContent 默认设置为 false 时，不会显示可选内容。当showOptionalContent改为true时，组件会重新渲染并显示可选内容。您可以使用生命周期方法或 useEffect 钩子来调用一个方法，该方法根据您希望何时/为什么要呈现可选内容来更改状态。

const [showOptionalContent, setShowOptionalContent] = setState(false);

return (
    <div>
        <h1>Title</h1>
        <div>Always rendered content</div>

        {showOptionalContent && (    // only renders when showOptionalContent === true
            <div>Optionally rendered content</div>
        )}

        <span>Always rendered content</span>

        {showOptionalContent && (    // only renders when showOptionalContent === true
            <span>Optionally rendered span</span>
        )}
    </div>
)

【讨论】：

看起来 HTML/JSX 最终可能很难阅读。标签中的内容很长。而且我之前不能将它们添加为字符串，因为它们并非都以标签开头。有没有更干净的方法？
您可以将内容设置为变量，并将它们显示在 JSX 标记内的括号中。例如const someContent = 'whatever content goes here' 并将其呈现为<div>{someContent}</div>。通过这种方式，您可以动态设置内容，就像使用 vanilla JS 一样，无论何时都可以。
我正在尝试const para2 = <p>{span1}{span2 && (<br/>{span2})}</p>;。它不工作。 Parsing error: Unexpected token, expected ","

【解决方案2】：

为了实现我的目标，我最终做了以下事情：

const title = <h1>Title</h1>
const line1 = [`Always existing sentence.`];
const line2 = [`Always existing sentence.`];

if (condition) {
  line1.push(`Optional sentence.`);
  line2.push(`Optional sentence.`);
}
const para1 = <p>{line1.join(' ')}<br/>{line2.join(' ')}</p>;

//This is a huge span
const span1 = <span>Always existing span.</span>;
let span2 = null;
if (condition2) {
  //This is a huge span
  span2 = <span>Optional span.</span>;
}

const para2 = <p>{span1}{span2 && (<><br/>{span2}</>)}</p>;

return <>{title}{para1}{para2}</>;

看起来还是有点不干净，但它确实有效，而且是我能想到的最好的。

【讨论】：