javascript - 在子元素之前或之后渲染

Question

如何在容器中的子元素之前或之后呈现？
我正在通过将 React 集成到我自己的网站来学习 React。我从这个开始:

function createErrorSection(name, title, description) {
    const section = document.createElement('section');
    const container = document.createElement('div');
    const h2 = document.createElement('h2');
    const p = document.createElement('p');
    section.appendChild(container);
    container.appendChild(h2);
    container.appendChild(p);
    section.id = name;
    section.classList = 'section-error';
    container.classList = 'section-error-container';
    h2.textContent = title;
    p.textContent = description;
    return section;
}

我变成了这个:

function createErrorSection(name, title, description) {
    return (
        <section id={name} className='section-error'>
            <div className='section-error-container'>
                <h2>{title}</h2>
                <p>{description}</p>
            </div>
        </section>
    );
}

这最终会传播到 node.before(section)或 node.after(section) .
我检查了 ReactDOM、ReactDOM/server 和 React，但没有运气。我看到我可以创建一个 HTML 字符串，但是我需要一个 HTMLElement 并且如果可以避免的话我宁愿不做我自己的渲染(我想学习 React 的方式，我已经知道 vanilla 的方式)。
我的最终目标是学习如何以及何时正确使用 React。我很想知道正确的方法，但也非常感谢洞察力、建议和解决方法!

Answer 1

在 React 中，您更愿意使用包含相应属性的单个参数创建自定义组件:

// single argument contains all props
function ErrorSection({name, title, description}) {
    return (
        <section id={name} className='section-error'>
            <div className='section-error-container'>
                <h2>{title}</h2>
                <p>{description}</p>
            </div>
        </section>
    );
}

现在你需要导入 ReactDOM 并调用 render为了显示组件 ErrorSecion在 ID 为 #app 的 HTML 节点中具有一些特定的属性值.确保您的 HTML 文档包含这样一个节点。

import ReactDOM from "react-dom";

ReactDOM.render(
  <ErrorSection name="..." title="..." description="..." />,
  document.querySelector("#app")
);

大多数 React 应用程序使用文档正文中的单个空 HTML 节点(例如 div#app 或 div#root)将一些动态生成的嵌套组件渲染到 DOM 中。所以你很可能只需要一个 ReactDOM.render调用您的整个项目。