我想在带有样式组件的列流中显示组件

Question

我是react样式组件的新手

为什么下一个代码不以列的方式显示元素

import styled from 'styled-components'
const CategoryButton = styled.button`
font-family: sans-serif;
font-size: 1.3rem;
border: none;
border-radius: 5px;
`
const categoryFilterContainer = styled.div`
display: flex;
flex-direction: column;
`
function App() {
var catArr = ['option 1', 'option 2', 'option 3']
return (
<categoryFilterContainer>
{catArr.map(category => {
return (
<CategoryButton>{category}</CategoryButton>
)
})}
</categoryFilterContainer>
);
}
export default App;

categoryFilterContainer指示流方向为column

我哪里做错了

拉斐尔

Answer 1

你定义的所有React组件必须以大写字母开头。

所以你的容器组件categoryFilterContainer应该重命名为CategoryFilterContainer，然后有

<CategoryFilterContainer>
...
</CategoryFilterContainer>

当大写固定时，你可以看到它们在这个沙盒中以列的形式垂直堆叠

Answer 2

如果您打算将项目显示为三列，那么您使用了错误的flex-direction CSS值。

flex-direction: column将把项目放在彼此的上方。

flex-direction: row将把项目放在一起。

.col, .row { display: flex }
.col { flex-direction: column }
.row { flex-direction: row }

<p>flex-direction: column</p>
<div class="col">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<p>flex-direction: row</p>
<div class="row">
<span>1</span>
<span>2</span>
<span>3</span>
</div>