【问题标题】:React: Rendering the component in different wayReact:以不同的方式渲染组件
【发布时间】:2018-09-10 02:44:29
【问题描述】:

我有两个组件,它们应该以下列方式出现:-

现在的问题是,我必须先渲染组件 B,然后再渲染组件 A。但是组件 A 应该显示在左侧,而 B 显示在右侧。 可以使用任何 CSS 或引导程序来显示/排列组件。

注意:组件A返回矩形,组件B返回圆形/椭圆。

【问题讨论】:

  • 问题是什么,如果您在渲染 B 时遇到问题,然后是 A,因此使用状态变量和超时并在 2 秒后显示组件。
  • 不,这是我必须以指定方式执行此操作的prblm语句
  • 是他们不同时渲染还是布局的问题?如果是布局,并且您不想在 HTML 中移动组件 A,则可以始终使用 CSS GRID
  • 我要先渲染A再渲染B,可以使用CSS网格来排列它们
  • @KerryGougeon & @MayankShukla,基本上我必须先在左侧显示 B,然后在右侧显示 A,我必须使用 react 渲染组件。

标签: javascript html twitter-bootstrap reactjs


【解决方案1】:

纯 CSS 解决方案:您可以使用 display: grid;order: 1;order: 2; 重新排列顺序。
我做了一个快速的codepen 来演示。

或者如果您不允许使用容器 - 像这样简单的事情可能会起作用:只需给组件 B 负边距左和组件 A 正边距左。 https://codepen.io/anon/pen/LddwYa

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-04-07
    • 2022-12-13
    • 1970-01-01
    • 2020-01-14
    • 2021-03-16
    • 2021-09-20
    相关资源
    最近更新 更多