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

【问题标题】：Why only a part of my child React component is showing up in the parent React component?为什么我的子 React 组件只有一部分显示在父 React 组件中？
【发布时间】：2018-05-31 04:19:49
【问题描述】：

我有一个父组件正在使用一个像这样的子组件：-

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 似乎存在于页面顶部某处但它不可见。

【问题讨论】：

能不能显示父组件代码
父母超级大..我把它放在swveral地方没有改变

标签： reactjs react-component

【解决方案1】：

去掉<div class="container">然后试试……<div class="inner">是flex子项，需要在flex父项<div class="outer" id="content">的正下方

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

【讨论】：