时间戳

首页 > 解决方案 > 如何在 React 中逐步构建 HTML？

html - 如何在 React 中逐步构建 HTML？

问题描述

我正在尝试以以下格式构建一些 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 中呈现的最佳方法是什么？

标签： htmlreactjsjsx

解决方案

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

每当 React 中的状态发生变化时，组件都会重新渲染。默认设置为false ，showOptionalContent不显示可选内容。当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>
)

推荐阅读