Как я могу постепенно построить HTML в React?

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

Все еще кажется немного нечистым, но это работает, и это было лучшее, что я мог придумать.