reactjs - 为什么我的子 React 组件只有一部分显示在父 React 组件中？

Question

我有一个使用子组件的父组件，如下所示：-

class Seasonal extends React.Component{


    componentDidMount(){

        const container = document.querySelector(".container");
        const lefty = document.querySelector(".lefty");
        let translate = 0;

        lefty.addEventListener("click", function() {
            translate += 200;
            container.style.transform = "translateX(" + translate + "px" + ")";
        });

        const righty = document.querySelector(".righty");
        righty.addEventListener("click", function() {
            translate -= 200;
            container.style.transform = "translateX(" + translate + "px" + ")";
        });

    }


    render() {
        return(
                <div>                   

                    <button class="lefty paddle" id="left-button"></button>
                    <div class="outer" id="content" >
                      <div class="container">
                        <div class="inner" style={{background:'red'}}></div>
                        <div class="inner" style={{background:'red'}}></div>
                        <div class="inner" style={{background:'red'}}></div>
                        <div class="inner" style={{background:'red'}}></div>
                        <div class="inner" style={{background:'red'}}></div>
                      </div>
                    </div>
                    <button class="righty paddle" id="right-button"></button>

                </div>
        )
    }


}
export default Seasonal

的CSS是这样的： -

.outer {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;

}

.inner {
  flex: 0 0 25%;
  height: 100px;
  margin:10px;
}
.paddle {
    position: absolute;
    top: 80px;
    bottom: 0;
    width: 30px;
    height:20px;
}

.lefty {
    left: 0;
}
.righty{
    right: 0;
}

当我在父组件中使用它时，仅显示按钮“外部” div 不可见是什么原因？如果我单击检查元素，外部 div 似乎存在于页面顶部某处但它不可见.

Answer 1

删除<div class="container">然后尝试...<div class="inner">是 flex 子项，需要位于 flex 父项的正下方<div class="outer" id="content">

编辑：这完全是一个 CSS 问题，而不是一个反应问题。