Question

我对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。

Answer 1

您应该将所有按钮包装在一个div中，为容器提供一个类，为它们的子级提供一个修饰符类（当它们处于活动状态时），并且如果要对框的显示进行动画处理，那么当它们另一个按钮处于活动状态，选择使它们不可见或类似的内容，因为否则很难让React只是将它们弹出来。

Answer 2

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

如何用CSS包装Reactjs组件

2 个答案: