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，以便在 ID 为 ErrorSecion 的 HTML 节点中显示具有某些特定属性值的组件 #app。确保您的 HTML 文档包含这样一个节点。

import ReactDOM from "react-dom";

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

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

Answer 2

首先，组件的名字应该写成PascalCase。

在 React 中，你应该重新考虑渲染元素的方式。

针对不同的目的有不同的方法：

将组件传递给 app\config.php 道具

Spatie\Geocoder\GeocoderServiceProvider

现在您可以通过这种方式将子项传递给包装器：

children

将组件传递给自定义道具：

如果您需要在不同位置渲染多个组件，您可以这样做：

const Wrapper = ({ children }) => (
  <div className="wrapper">
    <h1>Wrapper heading</h1>
    {children}
  </div>
);

然后像处理 HTML 中的属性一样将组件传递给 props：

const AnotherComponent = () => (
  <Wrapper>
    <div>Element that will be rendered where the children prop is placed</div>. 
  </Wrapper>
);

请注意，我为组件使用了自关闭标记，因为我没有在其中渲染子项。

渲染列表

const MultiSpotComponent = ({ HeaderComponent, FooterComponent }) => (
  <div>
    {HeaderComponent}

    <div>Some content</div>

    {FooterComponent}
  </div>
);

我只描述了 3 种最常用的方法，但还有更多渲染元素的方法。您可以在 https://imgur.com/0jPDRB3

了解更多信息

在子元素之前或之后渲染

2 个答案: