Question

我正在尝试使用 Material UI 创建一个可重用的导航选项卡，但是，我无法将对象传递给我的功能组件并将其映射出来。映射时不显示任何内容。

我对 React 钩子相当陌生。提前致谢。

类组件（将状态传递给导航）

class MyWorkspace extends Component {
  state = {
    menuItem: [
      {
        name: "menu 01",
        urlPath: "/home/menu01"
      },
      {
        name: "menu 02",
        urlPath: "/home/menu02"
      },
      {
        name: "Reports",
        urlPath: "/home/menu03"
      },
    ],
   }
  }

render () {
 return (
  <div>
   <Navigation menuItem />
  </div>
 )
}

功能组件

export default function Navigation({ menuItem }) {
  const [value, setValue] = React.useState(2);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const MenuList = () => {
    return (
      <>
        {menuItem.map(item => {
          return <Tab label={item.name} className="Nav-Tab" />;
        })}
      </>
    )
  }

  return (
    <div className="Nav-Title row">
        <Tabs
          className="Nav-Tab-List"
          value={value}
          indicatorColor="primary"
          textColor="primary"
          onChange={handleChange}
        >
          <MenuList />
        </Tabs>       
    </div>
  );
}

Answer 1

在类组件中，你应该为传递的 prop 赋值：

render () {
 return (
  <div>
   <Navigation menuItem={this.state.menuItem} />
  </div>
 )
}

在函数组件中，您应该在渲染中调用 MenuList() :

export default function Navigation({ menuItem }) {
  const [value, setValue] = React.useState(2);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const MenuList = () => {
    return (
      <>
        {menuItem.map(item => {
          return <Tab label={item.name} className="Nav-Tab" />;
        })}
      </>
    )
  }

  return (
    <div className="Nav-Title row">
        <Tabs
          className="Nav-Tab-List"
          value={value}
          indicatorColor="primary"
          textColor="primary"
          onChange={handleChange}
        >
          {MenuList()} // call this or put the map here
        </Tabs>       
    </div>
  );
}

Answer 2

首先需要在构造函数中定义状态

从状态中第二次销毁菜单项

const {menuItem} = this.state

像这样的三通道具

<Navigation menuItem={menuItem} />

如果您像这样传递 Navigation menuItem />，您将在子组件中获得布尔值 true。

Answer 3

在 MyWorkspace/render 函数中，您实际上并没有传递 menuItem 状态。

<Navigation menuItem /> 会将 menuItem 作为 true 值传递。将其替换为：<Navigation menuItem={this.state.menuItem} />

导航组件代码看起来正确

将对象数组传递给功能组件并映射

3 个答案: