从另一个文件加载 React 组件答案

【问题标题】：Loading React component from another file从另一个文件加载 React 组件
【发布时间】：2020-11-08 01:51:09
【问题描述】：

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

我了解这一切如何在一个文件中工作，但我不明白如何将其分解为单独的文件（显然是为了代码清晰的意图）。我也不知道如何从抽屉中取出我选择的项目的“变量”。下面我粘贴了我的两个文件，我想在父文件中获得“onclick”以在子文件中启动抽屉。任何帮助都会很棒！

我的父文件：

return (
    <Autocomplete
      id="search"
      ...
      renderInput={(params) => (
        <TextField
          {...params}
          label="Search for an item"
          variant="outlined"
          InputProps={{
            ...params.InputProps,
            startAdornment: (
              <InputAdornment position="start">
                <IconButton color="primary" aria-label="filters" component="span">
                  <TuneRoundedIcon onClick={ handleFilterOpen } />
                </IconButton>
                <Filter open={ openFilter} />
              </InputAdornment>
            ),
            endAdornment: (
              <React.Fragment>
                {loading ? <CircularProgress color="inherit" size={20} /> : null}
                {params.InputProps.endAdornment}
              </React.Fragment>
            ),
          }}
          fullWidth
        />
      )}

这是 Filter.tsx（我的子文件）：

export default function Filter() {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);

const handleDrawerOpen = () => {
   setOpen(true);
};

const handleDrawerClose = () => {
    setOpen(false);
};

return (
<Drawer
    className={classes.drawer}
    variant="persistent"
    anchor="right"
    open={open}
    classes={{
      paper: classes.drawerPaper,
    }}
  >
    <div className={classes.drawerHeader}>
      <IconButton onClick={handleDrawerClose}>
        {theme.direction === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
      </IconButton>
    </div>
    <Divider />
    <List>
      {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
        <ListItem button key={text}>
          <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
          <ListItemText primary={text} />
        </ListItem>
      ))}
    </List>
    <Divider />
    <List>
      {['All mail', 'Trash', 'Spam'].map((text, index) => (
        <ListItem button key={text}>
          <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
          <ListItemText primary={text} />
        </ListItem>
      ))}
    </List>
  </Drawer>
);
}

【问题讨论】：

这是一些基本的 react 东西。父组件处理打开状态并将其作为道具传递给子组件。子组件没有“打开”状态，而是使用从上面传递的 open prop 变量
我确信这是基本的，但我一周前才开始使用 React ;-)。抱歉，我明白你在说什么，但不能完全适应代码调用...
道歉...补充一下，我也不太明白如何将选定的变量（例如拨动开关）从子级拉回到父级...再次，对此很陌生，所以当文件被拆分时，它在我的脑海中并没有很好地映射。
我为您的问题添加了答案。我希望这能满足您的需求，如果不放心，请随时提出更多问题

标签： reactjs rxjs react-router material-ui

【解决方案1】：

您需要通过 props 将打开状态向下传递给子组件。子组件不应具有“打开”状态。为了更好地理解，我已经简化了这个：

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 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>
  );  
}

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

【讨论】：