如何根据来源页面条件渲染React函数式组件？

首先纠正一个误区：React的Props并非静态，完全可以动态传递参数实现条件渲染，结合路由传参就能解决你的页面来源判断需求，以下是对应场景的实现示例：

1. TableB组件：基于Props的条件渲染 #

核心是通过接收props参数，控制混合菜单的显示/隐藏：

// TableB 函数式组件
function TableB(props) {
  // 从props获取来源标识
  const { isFromSpecialTab } = props;

  return (
    <div>
      {/* 冰淇淋甜筒数据表格 */}
      <table className="ice-cream-table">
        {/* 表格内容示例 */}
        <thead>
          <tr>
            <th>甜筒名称</th>
            <th>价格</th>
          </tr>
        </thead>
        <tbody>
          {/* 这里渲染具体数据 */}
        </tbody>
      </table>

      {/* 条件渲染混合菜单：仅非特殊标签页来源时显示 */}
      {!isFromSpecialTab && (
        <div className="mix-menu">
          <h3>混合菜单</h3>
          <ul>
            <li>圣代套餐</li>
            <li>甜筒+饮料组合</li>
          </ul>
        </div>
      )}
    </div>
  );
}

2. 页面跳转时传递来源参数（结合React Router） #

因为涉及多页面跳转，通过URL查询参数传递来源标识是最直接的方式：

场景1：页面1的TableA跳转至带混合菜单的TableB #

import { Link } from 'react-router-dom';

function TableA() {
  // 示例冰淇淋数据
  const iceCreamData = [
    { id: 1, name: '巧克力甜筒', price: '12元' },
    { id: 2, name: '香草甜筒', price: '10元' }
  ];

  return (
    <table>
      {iceCreamData.map(item => (
        <tr key={item.id}>
          <td>
            {/* 跳转时传递isFromSpecialTab=false */}
            <Link 
              to={{
                pathname: '/page2',
                search: `?isFromSpecialTab=false&iceCreamId=${item.id}`
              }}
            >
              {item.name}
            </Link>
          </td>
          <td>{item.price}</td>
        </tr>
      ))}
    </table>
  );
}

场景2：页面2的特殊标签页返回TableA，再跳转至不带混合菜单的TableB #

// 页面2中的特殊标签页链接
import { Link } from 'react-router-dom';

function Page2Header() {
  return (
    <div className="tabs">
      <Link to={{
        pathname: '/table-a',
        search: '?fromSpecialTab=true'
      }}>
        特殊标签页（返回Table A）
      </Link>
    </div>
  );
}

// 此时的TableA需要读取URL参数，跳转时传递isFromSpecialTab=true
import { useLocation } from 'react-router-dom';

function TableA() {
  const location = useLocation();
  // 读取是否来自特殊标签页的参数
  const isFromSpecialTab = new URLSearchParams(location.search).get('fromSpecialTab') === 'true';
  const iceCreamData = [/* 数据同前 */];

  return (
    <table>
      {iceCreamData.map(item => (
        <tr key={item.id}>
          <td>
            <Link 
              to={{
                pathname: '/page2',
                search: `?isFromSpecialTab=${isFromSpecialTab}&iceCreamId=${item.id}`
              }}
            >
              {item.name}
            </Link>
          </td>
        </tr>
      ))}
    </table>
  );
}

页面2接收参数并传递给TableB #

import { useLocation } from 'react-router-dom';
import TableB from './TableB';

function Page2() {
  const location = useLocation();
  const isFromSpecialTab = new URLSearchParams(location.search).get('isFromSpecialTab') === 'true';

  return (
    <div>
      <Page2Header />
      {/* 将参数传递给TableB */}
      <TableB isFromSpecialTab={isFromSpecialTab} />
    </div>
  );
}

3. 可选：结合State实现动态切换（如果需要） #

如果后续需要在TableB页面内手动切换混合菜单的显示状态，可以用State配合Props初始化：

import { useState } from 'react';

function TableB(props) {
  // 用props初始化state，支持后续动态修改
  const [showMixMenu, setShowMixMenu] = useState(!props.isFromSpecialTab);

  return (
    <div>
      <table>
        {/* 表格内容 */}
      </table>

      {showMixMenu && (
        <div className="mix-menu">
          {/* 混合菜单内容 */}
          <button onClick={() => setShowMixMenu(false)}>隐藏混合菜单</button>
        </div>
      )}
      {!showMixMenu && (
        <button onClick={() => setShowMixMenu(true)}>显示混合菜单</button>
      )}
    </div>
  );
}

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