将 React-Bootstrap xs,sm,md,lg,xl spans/offsets 保存到 css class

Question

我们有以下 <Row> 和 2 <Col> 个元素：

<Row>
    <Col xs={12} sm={{ span: 9, offset: 1 }} md={{ span: 6, offset: 0 }} lg={5} xl={4}>
        <h3 className='graph-header-1'>First Header</h3>
        <div>Graph that fills the col-width goes here</div>
    </Col>
    <Col xs={12} sm={{ span: 9, offset: 1 }} md={{ span: 6, offset: 0 }} lg={{ span: 5, offset: 1 }} xl={{ span: 4, offset: 2 }}>
        <h3 className='graph-header-1'></h3>
        <div>2nd Graph that fills the column's width goes here</div>
    </Col>
</Row>

此布局（具有 2 列的行，每个 xs、sm、md、lg、xl 具有这些特定的跨度/偏移）将在我们的应用程序的几个地方使用。是否可以将其保存在 class 中，这样我们就可以简单地使用：

而不是一遍又一遍地设置这些值

<Row className='our-responsive-layout'>
    <Col>
        <h3 className='graph-header-1'>First Header</h3>
        <div>Graph that fills the col-width goes here</div>
    </Col>
    <Col>
        <h3 className='graph-header-1'></h3>
        <div>2nd Graph that fills the column's width goes here</div>
    </Col>
</Row>

...其中 our-responsive-layout 是处理 2 列的跨度/偏移量的 class？或者，每列有一个 class（而不是 2 列的行有 1 class）也会有帮助。

编辑： 如果有关于使用 react-bootstrap 及其容器/行/列组件处理复杂 react-app 中响应的任何详尽指南，请分享。我担心在我们的应用程序中添加 xs={12} sm={{ span: 9, offset: 1 }} md={{ span: 6, offset: 0 }} lg={{ span: 5, offset: 1 }} xl={{ span: 4, offset: 2 }} 之类的东西会使代码更加混乱。

谢谢！

Answer 1

你为什么不为此创建一个组件？东西 like that (demo) :

import React, { Component } from "react";
import { render } from "react-dom";

const App = () => {
  return (
    <MyRow>
      <MyCol>Here is your col 1</MyCol>
      <MyCol>Here is your col 2</MyCol>
    </MyRow>
  );
};

const MyRow = ({children}) => {
  return <div className='this is your row'>{children}</div>
}

const MyCol = ({children}) => {
  return <div className='this is your col'>{children}</div>;
}

render(<App />, document.getElementById("root"));

在这里，您只需将 MyRow 和 MyCol 中的 div 标签（当然还有类名）替换为您的行和列组件就足够了。

如果您想添加或更改类例如，您可以只添加一个道具。

将 React-Bootstrap xs,sm,md,lg,xl spans/offsets 保存到 css class

Save React-Bootstrap xs,sm,md,lg,xl spans/offsets into css class

css

reactjs

react-bootstrap

bootstrap-grid