主页 / 问题 / 1155434
Accepted
118_64
Asked:2020-07-21 17:35:07 +0000 UTC2020-07-21 17:35:07 +0000 UTC

为什么 React 中的组件会覆盖自己？

  • 772

我正在学习 React，我注意到后者child-компонент覆盖了前一个。

就我而言，在 render 之后，它<Feedback />存在于 DOM 中，但<Header />不存在。

我找不到这种行为的原因的描述，你能告诉我如何解决它，它是在哪里描述的？

function Header(props) {
  return (
    <header>
      <h1>{props.text}</h1>
    </header>
  );
}

function Feedback() {
  return (
    <ul></ul>
  );
}

function App() {
  return(
    <Header text="Отзывы" />,
    <Feedback />
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
javascript

2 个回答

  1. 因为除了 React 之外，学习 JavaScript 也不错。

    在编写视图构造(a, b)时，使用“逗号”运算符，在所有类 C 语言中都返回最后一个参数。

    要返回多个元素 - 您需要一个容器。React 建议使用片段作为容器：<>a b</>。

    • 4
  2. Best Answer

    根据React 的规则，您只能从 render 方法中返回一个元素。例如，包装你的组件，div或者使用React Fragment来保持原始布局：

    return (
    <React.Fragment>   
       <Header text="Отзывы" /> // запятая тут не нужна
       <Feedback />
    </React.Fragment> 
)

    记录：

    <React.Fragment></React.Fragment>

    类似（相同）：

    <></>
    • 3

相关问题