无覆盖的 React 组件渲染

【问题标题】：React component rendering without overlay无覆盖的 React 组件渲染
【发布时间】：2020-09-30 23:12:31
【问题描述】：

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

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

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

【问题讨论】：

我的回答有用吗？
是的，它确实有点像我在位置上的风格：绝对在其中一个组件上，但你的回答最终很有帮助，谢谢！
克里斯，别担心，伙计。如果可以，请标记答案正确，让其他人知道它已完成。祝你有美好的一天！

标签： css reactjs components

【解决方案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' }应该是一个开始

【讨论】：