无覆盖的 React 组件渲染

Posted 2023-02-23

【中文标题】无覆盖的 React 组件渲染

【英文标题】：React component rendering without overlay

【发布时间】：2020-09-30 23:12:31

【问题描述】：

嘿，我对 React 还是很陌生，我对组件的渲染存在误解，所以如果我在另一个组件中使用两个不同的组件来渲染它们，例如在一个页面中，它们总是重叠的。

export class PageComponent extends Component 
  render() 
    return (
      <div className="container">
        <TripForm />
        <br />
        <TinyEditor />
      </div>
    );
  

但我希望它们在彼此下方对齐，因为它们被编写为仅作为内容块相互尊重的一个组件。 那么我对组件的错误或误解在哪里，谁能解释一下？

【问题讨论】：

我的回答有用吗？

是的，它确实有点像我在位置上的风格：绝对在其中一个组件上，但你的回答最终很有帮助，谢谢！

克里斯，别担心，伙计。如果可以，请标记答案正确，让其他人知道它已完成。祝你有美好的一天！

【参考方案1】：

他们也会按照你告诉他们的风格行事

你有这个

export class PageComponent extends Component 
  render() 
    return (
      <div className="container">
        <TripForm />
        <br />
        <TinyEditor />
      </div>
    );
  

如果 tripForm 和 TinyEditor 是 div 组件，它们的行为将与此相同，并且本质上与此相同

export class PageComponent extends Component 
  render() 
    return (
      <div className="container">
        <div />
        <br />
        <div />
      </div>
    );
  

除非你在 CSS 中告诉它，否则永远不会有重叠

如果您希望它们对齐，请将 css 应用于此类 .container

.container display: 'flex', flexDirection: 'column' 应该是一个开始