Css ReactJS中的可移动拆分屏幕

我想拆分一个可移动和可移动的屏幕，但我无法做到这一点，我使用了react split pane，但它不工作，我需要的功能是，当单击屏幕下部列表中的配置文件图标时，上屏幕的数据会相应地更改。下面的示例代码描述了我实际需要的功能，您可以在这里实现，我将相应地进行更改

class MainComponent扩展了React.Component{
构造函数（）{
超级（）；
这个州={
姓名：“
}
this.changeDetected=this.changeDetected.bind（this）
}
检测到更改（值）{
这是我的国家({
名称：value
})
}
render（）{
返回(
{*在这里拆分*}
)
}
}
导出默认主组件

//屏幕上部

class Upper_compo extends React.component{
   constructor(props){
      super();
      this.state={
          name:props.data
      }
    }



   render(){
       return(
             <>
                <h1>{this.state.name}</h1>
             </>
        )
    }
}
export default Upper_compo

class Lower_compo extends React.component{
   constructor(){
      super();
      this.state={
      }
    }



   render(){
       return(
             <>
                <input type="text" placeholder="name" onChange={this.props.changeDected(value) />
             </>
        )
    }
}
export default Lower_compo

类上层组件扩展React.component{
建造师（道具）{
超级（）；
这个州={
名称：props.data
}
}
render（）{
返回(
{this.state.name}
)
}
}
导出默认上部组件

//屏幕下部

class Upper_compo extends React.component{
   constructor(props){
      super();
      this.state={
          name:props.data
      }
    }



   render(){
       return(
             <>
                <h1>{this.state.name}</h1>
             </>
        )
    }
}
export default Upper_compo

class Lower_compo extends React.component{
   constructor(){
      super();
      this.state={
      }
    }



   render(){
       return(
             <>
                <input type="text" placeholder="name" onChange={this.props.changeDected(value) />
             </>
        )
    }
}
export default Lower_compo

类较低的组件扩展了React.component{
构造函数（）{
超级（）；
这个州={
}
}
render（）{
返回(
)
}
}
导出默认较低的组件

在我看来问题出在

上部组件中：在那里，您将
名称
保存到构造函数中的
状态
，然后在渲染中使用
this.state.name
（顺便说一句，它应该是
名称
，小写
n
）

但是，通过这种方式，您不再考虑
this.props.name
，因此它永远不会改变。
由于
Upper\u compo
不需要更改
名称
，因此您可以在
Upper\u compo
的
渲染
中使用
this.props.name
，而不是
this.state.name
：感谢您，每当props
名称
更改时，
Upper\u compo
的呈现UI将相应更改

顺便说一句，通过将状态保留在父组件中，在您的例子中，
main组件
，您正在执行所谓的提升状态：这是一个完全正常的实现

编辑：或者，在
Upper\u compo
中，您应该实现
getDerivedStateFromProps
：，它允许您根据props中的一些更改来更新状态。

尽管如此，我还是推荐这种方式，但我解释的第一种方式。
我之所以给出这段代码，是因为我的问题是创建一个可移动的spiltCan，它可以帮助我解决这个问题