React中如何将MainPage的favoriteRender变量传递到FavoriteCrypto组件

情况1：MainPage是FavoriteCrypto的父组件（直接渲染子组件） #

如果你的MainPage组件里直接渲染了FavoriteCrypto（比如在同一页面展示），直接通过props传递数据即可：

1. 在MainPage中传递props：

// MainPage.js
function MainPage() {
  // 假设你已经有data和favorites变量
  let favoriteRender = data.filter(item => favorites.includes(item.id));

  // 渲染FavoriteCrypto时传入筛选后的数据
  return (
    <div>
      {/* 其他页面内容 */}
      <FavoriteCrypto favoriteData={favoriteRender} />
    </div>
  );
}

2. 在FavoriteCrypto中接收并使用props：

// FavoriteCrypto.js
// 函数组件通过参数解构接收props
function FavoriteCrypto({ favoriteData }) {
  return (
    <div className="favorite-cryptos">
      <h2>我的收藏币种</h2>
      {/* 遍历渲染收藏的数据 */}
      {favoriteData.map(crypto => (
        <div key={crypto.id} className="crypto-item">
          <p>{crypto.name}</p>
          <p>价格: {crypto.price}</p>
        </div>
      ))}
    </div>
  );
}

export default FavoriteCrypto;

情况2：MainPage和FavoriteCrypto是独立路由页面（两个不同页面） #

如果两个组件是通过路由跳转的独立页面，没法直接用props传递，推荐两种适合新手的方案：

方案A：用localStorage存储收藏列表 #

这种方法无需额外依赖，适合简单场景：

1. 在MainPage中，当收藏列表favorites变化时，同步到localStorage：

// MainPage.js
import { useState, useEffect } from 'react';

function MainPage() {
  const [favorites, setFavorites] = useState([]);

  // 收藏列表变更时，保存到本地存储
  useEffect(() => {
    localStorage.setItem('cryptoFavorites', JSON.stringify(favorites));
  }, [favorites]);

  // 筛选收藏数据
  let favoriteRender = data.filter(item => favorites.includes(item.id));

  // ...其他页面逻辑
}

2. 在FavoriteCrypto中，从localStorage读取收藏列表并筛选数据：

// FavoriteCrypto.js
import { useState, useEffect } from 'react';

function FavoriteCrypto() {
  const [data, setData] = useState([]);
  // 从本地存储获取收藏列表，默认空数组
  const favorites = JSON.parse(localStorage.getItem('cryptoFavorites')) || [];

  // 模拟获取加密货币数据（实际替换成你的API请求）
  useEffect(() => {
    fetch('https://api.example.com/cryptos')
      .then(res => res.json())
      .then(setData);
  }, []);

  // 筛选收藏的币种
  const favoriteRender = data.filter(item => favorites.includes(item.id));

  return (
    <div>
      <h2>我的收藏</h2>
      {favoriteRender.length === 0 ? (
        <p>还没有收藏任何币种</p>
      ) : (
        favoriteRender.map(crypto => (
          <div key={crypto.id}>{crypto.name}</div>
        ))
      )}
    </div>
  );
}

方案B：用Context API管理全局状态 #

如果后续需要在更多组件中共享收藏数据，Context API是更规范的方式：

1. 创建Context文件（比如CryptoContext.js）：

// CryptoContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const CryptoContext = createContext();

export function CryptoProvider({ children }) {
  const [favorites, setFavorites] = useState([]);

  // 初始化时从本地存储加载收藏数据
  useEffect(() => {
    const savedFavorites = localStorage.getItem('cryptoFavorites');
    if (savedFavorites) {
      setFavorites(JSON.parse(savedFavorites));
    }
  }, []);

  // 收藏变更时同步到本地存储
  useEffect(() => {
    localStorage.setItem('cryptoFavorites', JSON.stringify(favorites));
  }, [favorites]);

  // 提供给子组件的状态和操作方法
  const value = {
    favorites,
    addFavorite: (cryptoId) => setFavorites(prev => [...prev, cryptoId]),
    removeFavorite: (cryptoId) => setFavorites(prev => prev.filter(id => id !== cryptoId))
  };

  return (
    <CryptoContext.Provider value={value}>
      {children}
    </CryptoContext.Provider>
  );
}

// 自定义Hook简化Context调用
export function useCrypto() {
  return useContext(CryptoContext);
}

2. 在入口文件（比如App.js）中用Provider包裹所有组件：

// App.js
import { CryptoProvider } from './CryptoContext';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import MainPage from './MainPage';
import FavoriteCrypto from './FavoriteCrypto';

function App() {
  return (
    <CryptoProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<MainPage />} />
          <Route path="/favorites" element={<FavoriteCrypto />} />
        </Routes>
      </BrowserRouter>
    </CryptoProvider>
  );
}

export default App;

3. 在MainPage中使用Context：

// MainPage.js
import { useCrypto } from './CryptoContext';
import { useState, useEffect } from 'react';

function MainPage() {
  const { favorites, addFavorite, removeFavorite } = useCrypto();
  const [data, setData] = useState([]);

  // 获取币种数据
  useEffect(() => {
    fetch('https://api.example.com/cryptos')
      .then(res => res.json())
      .then(setData);
  }, []);

  return (
    <div>
      {/* 渲染所有币种，添加/移除收藏按钮 */}
      {data.map(crypto => (
        <div key={crypto.id}>
          <span>{crypto.name}</span>
          {favorites.includes(crypto.id) ? (
            <button onClick={() => removeFavorite(crypto.id)}>取消收藏</button>
          ) : (
            <button onClick={() => addFavorite(crypto.id)}>添加收藏</button>
          )}
        </div>
      ))}
    </div>
  );
}

4. 在FavoriteCrypto中使用Context：

// FavoriteCrypto.js
import { useCrypto } from './CryptoContext';
import { useState, useEffect } from 'react';

function FavoriteCrypto() {
  const { favorites } = useCrypto();
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/cryptos')
      .then(res => res.json())
      .then(setData);
  }, []);

  const favoriteRender = data.filter(item => favorites.includes(item.id));

  return (
    <div>
      <h2>我的收藏币种</h2>
      {favoriteRender.length === 0 ? (
        <p>暂无收藏</p>
      ) : (
        favoriteRender.map(crypto => (
          <div key={crypto.id}>
            <p>{crypto.name}</p>
            <p>当前价格: ${crypto.price}</p>
          </div>
        ))
      )}
    </div>
  );
}

export default FavoriteCrypto;

为什么直接导入变量不行？ #

React组件是独立模块，变量作用域仅限于自身内部。直接导入的只是变量的初始值，无法实时更新；而且如果data是MainPage的局部变量，其他组件根本无法访问。必须通过props、状态管理（如Context）或本地存储这类方式实现组件间数据共享。

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