如何用CSS包装Reactjs组件
如何用CSS包装Reactjs组件
提问于 2018-08-03 06:18:47
我是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和引导。
回答 2
Stack Overflow用户
发布于 2018-08-03 06:26:51
你应该把你所有的按钮包装在一个单独的div中，给容器一个单独的类，当它们被激活时给它的孩子一个修饰符类，如果你想要动画显示框，那么你不应该在另一个按钮被激活时卸载它们，选择使它们不可见或类似的东西，因为否则很难没有React，只是将它们弹出存在。
Stack Overflow用户
发布于 2018-08-03 06:47:27
我使用内联样式标签。这真的是个人喜好的情况。当您尝试新事物时，您会发现最适合您和单个项目的实践。内联样式标签看起来像这样。<div style={{ display: 'flex', width: '100%', backgroundColor: 'red' }}></div>这样做的好处是你可以保持在组件中定义的样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51662878
复制相关文章
相似问题