Reactjs 从另一个文件加载React组件

我正在使用React材质UI库。我在主/父页面上有一个搜索“过滤器”，它会弹出一个位于单独文件中的抽屉

我理解这一切是如何在一个文件中工作的，但我不理解如何将其分解为单独的文件（显然是为了代码清晰）。我也不知道如何从抽屉中取出我选择的项目的“变量”。下面我粘贴了我的两个文件，我希望通过父文件中的“onclick”启动子文件中的抽屉。任何帮助都会非常好

我的父文件：

返回(
(
)}

您需要通过道具将打开状态传递给子组件。子组件不应具有“打开”状态。为了更好地理解，我已对其进行了简化：

const Parent = () => {
  const [open, setOpen] = React.useState(false);
  const toggleOpen = () => {
     setOpen(!open)
  }
  
  const customFunction(valueFromChildComponent) {
    alert(valueFromChildComponent); // this alerts "myValue" since "myValue" is passed from child component
  }
  
  return (
    <Child isOpen={open} myCustomFunction={customFunction} />
  );  
}

const Parent=（）=>{
const[open，setOpen]=React.useState（false）；
const toggleOpen=（）=>{
setOpen（！open）
}
常量自定义函数（valueFromChildComponent）{
警报（valueFromChildComponent）；//由于“myValue”是从子组件传递的，因此此警报会向“myValue”发出警报
}
返回(
);  
}

子组件

const Child = props => {      
  return (
    console.log(props.isOpen) // props.isOpen contains the value passed down from the parent
    <button onClick={props.myCustomFunction("myValue")}>test Button</button>
  );  
}

constchild=props=>{
返回(
console.log（props.isOpen）//props.isOpen包含从父级传递的值
测试按钮
);  
}

---

我还添加了一个示例，说明如何向上传递子组件的值。在我的示例中，我向上传递了一个字符串，但您可以向上传递下拉列表的选定值或基本上任何您想要的值。

这是一些基本的react内容。父组件处理打开状态，并将其作为道具传递给子组件子组件没有“打开”状态，而是使用上面传递的open prop变量。我确信它是基本的，但我一周前才开始使用React；-）。抱歉，我明白你的意思，但不能完全融入到代码调用中…抱歉。。。另外，我也不太明白所选变量（例如切换开关）是如何从子变量拉回到父变量的。。。同样，这是一个全新的概念，所以当文件被拆分时，它在我的脑海中并没有很好的映射。我为你的问题添加了一个答案。我希望这符合你的需要，如果你不想问更多的问题