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不可见是什么原因？如果我点击inspect元素的外部div似乎存在于页面顶部的某处但是它不可见。

Answer 1

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

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

为什么只有我的孩子React组件的一部分出现在父React组件中？

1 个答案: