MUI (Material UI) Toggle Button Group useState Hook in React.js

Question

我的 App.js 中有以下内容：

import { Box } from "@mui/system";
import Header from "./components/Header";
import ProjectList from "./components/ProjectList";
import CardLayout from "./components/CardLayout";
import React, { useState } from "react";

function App() {
  const [view, setView] = useState("list");

  const handleView = (event, newView) => {
    setView(newView);
  };

  return (
    <Box>
      <Header view={view} onChange={handleView} />
      <ProjectList />
      <CardLayout />
    </Box>
  );
}

export default App;

目标是在选择具有值列表的切换按钮时仅呈现 ProjectList 组件 <ToggleButton value={props.list}> 并且在选择具有值网格的切换按钮时仅呈现 CardLayout 组件 <ToggleButton value={props.grid}>

我的 Header.js 组件（按钮部分）是这样的：

  <ToggleButtonGroup
    size="large"
    value={props.view}
    onChange={props.onChange}
    exclusive
  >
    <ToggleButton value={props.list}>
      <TableRowsIcon />
    </ToggleButton>
    <ToggleButton value={props.grid}>
      <GridViewIcon />
    </ToggleButton>
  </ToggleButtonGroup>

我是否正确地将道具从 parent 传递到 child？ setView 函数应该是什么？

Answer 1

您可以简单地使用条件渲染来实现。

例如，在您的 App.js 中，更改为：

<ProjectList />

对此：

{ view == list ?? <ProjectList /> }

仅当 view == list 时才会呈现 <ProjectList />。您将需要创建另一个状态来处理 CardLayout 渲染。

更多关于条件渲染的信息可以在官方文档中找到：https://beta.reactjs.org/learn#conditional-rendering

Answer 2

我认为这段代码 <ToggleButton value={props.list}> 你必须写成 <ToggleButton value='List'> 因为 'list' 的值不是属性
如果您使用 class 组件，请不要忘记 this. 在 header 组件

Answer 3

对于以后阅读本文的任何人，我想通了：切换按钮组应如下所示：

<ToggleButtonGroup
            size="large"
            value={props.view}
            exclusive
            onChange={props.onSetView}
          >
            <ToggleButton value="list">
              <TableRowsIcon />
            </ToggleButton>
            <ToggleButton value="grid">
              <GridViewIcon />
            </ToggleButton>
          </ToggleButtonGroup>

并且在 App.js 中，setViewHandler 必须具有此 if 条件才能使切换正常工作：

  const setViewHandler = (event, newView) => {
    if (newView !== null) {
      setView(newView);
    }
    console.log(view);
  };

然后，您只需将此函数作为 prop 传递给按钮所在的子组件即可。

MUI (Material UI) Toggle Button Group useState Hook in React.js

MUI (Material UI) Toggle Button Group useState Hook in React.js

reactjs

material-ui