时间戳

首页 > 解决方案 > 如何用 CSS 包装 Reactjs 组件

css - 如何用 CSS 包装 Reactjs 组件

问题描述

我对 Reactjs 世界还很陌生，我已经编写了我希望用 CSS 变得漂亮的组件 :)

我的组件由几个按钮和框组​​成，单击按钮后会显示这些按钮和框。

class Days extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showComponent: "Box1" };
  }

  toggleDiv = name => {
    if (name === "monday") {
      this.setState({
        showComponent: "Box1"
      });
    } else if (name === "thursday") {
      this.setState({
        showComponent: "Box2"
      });
    }
  };

  render() {
    return (
      <div>
        <button onClick={() => this.toggleDiv("monday")}>
          <div className="botun">Monday</div>
        </button>
        {this.state.showComponent === "Box1" && <Box1 />}

        <button onClick={() => this.toggleDiv("thursday")}>
          <div className="botun">Thursday</div>
        </button>
        {this.state.showComponent === "Box2" && <Box2 />}
      </div>
    );
  }
}

class Box1 extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col">
            <h1>BOx1</h1>
          </div>
        </div>
      </div>
    );
  }
}

class Box2 extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col">
            <h1>Box2</h1>
          </div>
        </div>
      </div>
    );
  }
}

在此处输入图像描述

单击 button1 后，将显示下面的相应框。

所以我的问题是如何将所有按钮和框放入一个容器中并像截图中一样设置样式？

如果我像这样将它包含在我的landingpage.js 中

<div className="container">
 <div className="row">
  <Days />
 </div>
</div>

我怎样才能让我的按钮排成一行？

我不确定如何使用 CSS 来解决这个问题。

将 CSS 和 CSS 框架与 ReactJS 一起使用时的最佳实践是什么？

我正在使用全局 style.css 和 Boostrap。

标签： cssreactjs

解决方案

我使用内联样式标签。这真的是个人喜好的情况。当您尝试新事物时，您会发现最适合您和个人项目的做法。内联样式标签如下所示。<div style={{ display: 'flex', width: '100%', backgroundColor: 'red' }}></div>这样做的好处是您可以保留在组件中定义的样式。

推荐阅读