如何在Home.tsx中获取Navbar.tsx内linkClicked函数的点击变量用于条件判断？

方案一：状态提升（React官方推荐） #

React是单向数据流，子组件的状态需要提升到共同的父组件，再通过props传递给需要的组件，这是最直接的解决方案。

步骤1：在共同父组件（如App.tsx）定义状态和回调 #

import { useState } from 'react';
import Navbar from './Navbar';
import Home from './Home';

function App() {
  // 定义点击状态
  const [isLinkClicked, setIsLinkClicked] = useState(false);

  // 传给Navbar的回调，用于更新状态
  const handleLinkClick = () => {
    setIsLinkClicked(true);
  };

  return (
    <div>
      <Navbar onLinkClick={handleLinkClick} />
      <Home isLinkClicked={isLinkClicked} />
    </div>
  );
}

export default App;

步骤2：在Navbar.tsx中调用父组件传入的回调 #

修改linkClicked函数，触发父组件的回调来同步状态：

// Navbar.tsx
interface NavbarProps {
  onLinkClick: () => void;
}

function Navbar({ onLinkClick }: NavbarProps) {
  const linkClicked = () => {
    // 保留你原本的点击逻辑
    // ...
    
    // 调用父组件回调，更新状态
    onLinkClick();
  };

  return (
    <nav>
      {/* 触发点击的元素示例 */}
      <button onClick={linkClicked}>导航链接</button>
    </nav>
  );
}

export default Navbar;

步骤3：在Home.tsx中接收状态并做条件判断 #

// Home.tsx
interface HomeProps {
  isLinkClicked: boolean;
}

function Home({ isLinkClicked }: HomeProps) {
  return (
    <div>
      {isLinkClicked ? (
        <p>导航链接已被点击</p>
      ) : (
        <p>导航链接未被点击</p>
      )}
      {/* 其他Home组件内容 */}
    </div>
  );
}

export default Home;

方案二：使用Context API（适合多组件共享/层级较深场景） #

如果组件层级很深，或者多个组件都需要用到这个点击状态，可以用Context实现跨组件状态共享。

步骤1：创建Context #

// LinkClickContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react';

interface LinkClickContextType {
  isLinkClicked: boolean;
  setIsLinkClicked: (value: boolean) => void;
}

const LinkClickContext = createContext<LinkClickContextType | undefined>(undefined);

export function LinkClickProvider({ children }: { children: ReactNode }) {
  const [isLinkClicked, setIsLinkClicked] = useState(false);

  return (
    <LinkClickContext.Provider value={{ isLinkClicked, setIsLinkClicked }}>
      {children}
    </LinkClickContext.Provider>
  );
}

export function useLinkClick() {
  const context = useContext(LinkClickContext);
  if (!context) {
    throw new Error('useLinkClick必须在LinkClickProvider内部使用');
  }
  return context;
}

步骤2：用Provider包裹根组件 #

// App.tsx
import { LinkClickProvider } from './LinkClickContext';
import Navbar from './Navbar';
import Home from './Home';

function App() {
  return (
    <LinkClickProvider>
      <Navbar />
      <Home />
    </LinkClickProvider>
  );
}

export default App;

步骤3：在Navbar.tsx中更新状态 #

// Navbar.tsx
import { useLinkClick } from './LinkClickContext';

function Navbar() {
  const { setIsLinkClicked } = useLinkClick();

  const linkClicked = () => {
    // 原本的点击逻辑
    // ...
    
    // 更新Context中的状态
    setIsLinkClicked(true);
  };

  return (
    <nav>
      <button onClick={linkClicked}>导航链接</button>
    </nav>
  );
}

export default Navbar;

步骤4：在Home.tsx中获取状态并判断 #

// Home.tsx
import { useLinkClick } from './LinkClickContext';

function Home() {
  const { isLinkClicked } = useLinkClick();

  return (
    <div>
      {isLinkClicked ? (
        <p>导航链接已被点击</p>
      ) : (
        <p>导航链接未被点击</p>
      )}
    </div>
  );
}

export default Home;

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