Question

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

Answer 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>
)

Answer 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}</>;

仍然看起来有点不干净，但是它可以正常工作，这是我能想到的最好的结果。

如何在React中逐步构建HTML？

2 个答案: