我是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来处理这个问题。
在ReactJS中使用CSS和CSS框架的最佳实践是什么?
我使用的是全局style.css和引导。
发布于 2018-08-03 06:26:51
你应该把你所有的按钮包装在一个单独的div中,给容器一个单独的类,当它们被激活时给它的孩子一个修饰符类,如果你想要动画显示框,那么你不应该在另一个按钮被激活时卸载它们,选择使它们不可见或类似的东西,因为否则很难没有React,只是将它们弹出存在。
发布于 2018-08-03 06:47:27
我使用内联样式标签。这真的是个人喜好的情况。当您尝试新事物时,您会发现最适合您和单个项目的实践。内联样式标签看起来像这样。<div style={{ display: 'flex', width: '100%', backgroundColor: 'red' }}></div>
这样做的好处是你可以保持在组件中定义的样式。
https://stackoverflow.com/questions/51662878
复制相似问题