javascript - 如何在一行中呈现状态列表？

Question

我有 3 个文件，App.js、Day.js、DayList.js，我试图在一行中呈现 DayList。

它的设置是这样的:

App.js

state: [
  days: {day1, day2, day3...}
]

render() {
  return(
      <DayList />
   )}

日列表.js

props.days.map(...
    <Day />...)

而不是像 App.js 那样渲染它:

Head
Day1
Day2
Day3

我希望它呈现如下:

Head
Day1 Day2 Day3

但由于某种原因我无法弄清楚......有什么帮助吗？

Answer 1

一种选择是“包装”您的 <Day />用 flex-box 显示的容器中的组件，以便 layout axis of that container's children are horizontal .

可以将包装器引入到 <DayList /> 的渲染结果中, 导致 <Day/> 的这种水平排列子组件。

因此，例如，通过将以下 CSS 和 JSX 添加到您的元素中，您可以获得预期的结果:

CSS

.horizontal-layout {
    display:flex;
    flex-direction:row;
}

DayList.js

render() {

    const props = /* ... from somewhere in your code ... */

    /* 
    Cause the "Day" children of "DayList" to be wrapped in a container styled
    with flex-box that produces a horizontal layout
    */
    return <div className="horizontal-layout">{ props.days.map(() => <Day />)</div>
}