React：点击按钮后如何在独立组件规范展示对象值及优化？

问题描述 #

已通过useState、onClick、onSelected及props实现菜单按钮功能，将对应对象数据传递至独立组件SidePage展示。但不确定该实现是否规范高效（后续计划为完整主应用接入后端功能）；此外，希望将对象的属性值存入变量，以更合理地展示选中菜单项的详情，但困惑于应使用this.state还是props实现。（需先点击Chicken按钮才会显示菜单项按钮）

相关代码 #

SidePage 组件源码 #

import * as React from "react";
import { Typography } from "@mui/material";

export default function SidePage(props) {
  return (
    <div>
      <Typography sx={{ mt: 20 }}>Menu Item Details:</Typography>

      <div>{props.menuItemDetails}</div>
    </div>
  );
}

HomeOrderPage（主页面）源码 #

import * as React from "react";
import { useState } from "react";

import { Stack } from "@mui/material";
import ButtonCategoryStyle from "./ButtonCategoryStyle";

import ChickenButtons from "./categoryButtons/ChickenButtons";
import SidePage from "./SidePage";
const categories = ["Chicken"];

export default function HomeOrderPage() {
  const [myCategory, setMyCategory] = useState("");
  const [food, setFood] = useState(null);

  return (
    <div>
      <Stack spacing={0} direction="row">
        {categories.map((category) => (
          <ButtonCategoryStyle
            title={category.toLocaleUpperCase()}
            key={category}
            onClick={() => setMyCategory(category)}
          />
        ))}
      </Stack>

      <div>
        <p>
          {myCategory === "Chicken" && <ChickenButtons onSelected={setFood} />}
        </p>
      </div>
      
      {/* 点击菜单项后渲染详情 */}
      <div style={{ backgroundColor: "blue" }}>
        <SidePage
          menuItemDetails={
            food && <pre sx={{ ml: 120 }}>{JSON.stringify(food, null, 2)}</pre>
          }
        />
      </div>
    </div>
  );
}

解答 #

1. 实现的规范与高效性 #

当前实现思路合理且符合React组件设计原则：

• 主组件HomeOrderPage作为状态统一管理者，维护选中分类myCategory和选中菜品food，遵循"单一数据源"理念，后续接入后端时，只需在主组件中处理数据请求、更新状态即可，数据流不会混乱。
• 通过props传递数据和回调（onSelected）是React组件通信的标准方式，无冗余逻辑，性能上也无明显问题——除非后续菜品数据量极大，当前渲染方式完全够用。
• 可优化点：
  • 可将分类判断逻辑（myCategory === "Chicken"）抽成独立逻辑，或用对象映射扩展更多分类，避免新增分类时出现大量if/else或&&判断。
  • 当前SidePage接收已渲染好的JSX（menuItemDetails），可改为直接传递food对象，让SidePage自行负责渲染详情，使组件职责更单一、更易复用。

2. 关于对象属性存入变量的实现方式 #

首先明确：你使用的是函数式组件，不存在this.state——this.state是类组件的用法，函数式组件依赖useState钩子。

针对需求，推荐两种方式：

• 方式一：主组件处理属性后传递给SidePage
  在HomeOrderPage中提取food的属性为变量，再传给SidePage：

  // HomeOrderPage中
  const foodName = food?.name;
  const foodPrice = food?.price;
  // ...提取其他属性
  
  <SidePage foodName={foodName} foodPrice={foodPrice} />
  

  随后在SidePage中直接使用props接收的变量渲染。

• 方式二：SidePage内部处理props传递的food对象
  直接将food对象传给SidePage，在组件内部提取属性：

  // HomeOrderPage中
  <SidePage selectedFood={food} />
  
  // SidePage中
  export default function SidePage(props) {
    const { selectedFood } = props;
    if (!selectedFood) return <div>No item selected</div>;
    
    const { name, price, description } = selectedFood;
    return (
      <div>
        <Typography sx={{ mt: 20 }}>Menu Item Details:</Typography>
        <div>Name: {name}</div>
        <div>Price: ${price}</div>
        <div>Description: {description}</div>
      </div>
    );
  }
  

  这种方式更推荐，因为SidePage作为详情展示组件，应负责自身渲染逻辑，主组件仅传递数据源即可，耦合度更低，后续修改详情样式时只需改动SidePage。

内容的提问来源于stack exchange，提问作者Ralph Henry