React中如何访问其他组件的state变量？含非父子/父子组件场景

问题描述 #

我有如下Landing组件，其this.state中包含两个变量：

class Landing extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchQuery: "",
      searchQueryWords: [],
    };
 }
// 组件其余渲染逻辑省略

searchQuery与searchQueryWords会在Landing组件内部完成赋值。我有一个非其子组件的其他组件，希望使用这两个已赋值的变量。该落地页在网站中先于目标组件所在页面加载，因此访问目标组件前这两个变量已确定。

请问：

1. 能否实现这种跨非父子组件的变量传递？
2. 若必须通过父子组件关系来共享这些变量，该如何操作？

一、跨非父子组件传递变量的可行方案 #

当然可以实现，结合你的场景（变量在目标组件加载前已确定），推荐以下几种实用方式：

1. React Context API（官方跨组件状态方案） #

这是React原生提供的跨层级组件共享状态的方案，无需依赖第三方库：

• 先创建上下文及便捷调用的Hook：

  import { createContext, useContext } from 'react';
  
  const SearchContext = createContext();
  
  export function useSearchContext() {
    return useContext(SearchContext);
  }
  

• 在Landing和目标组件的共同父组件（比如App组件）中，用SearchContext.Provider包裹所有需要共享状态的组件，并管理状态：

  function App() {
    const [searchData, setSearchData] = useState({
      searchQuery: "",
      searchQueryWords: []
    });
  
    return (
      <SearchContext.Provider value={searchData}>
        <Landing setSearchData={setSearchData} />
        <TargetComponent />
      </SearchContext.Provider>
    );
  }
  

• 在Landing组件中更新共享状态：

  class Landing extends Component {
    // 内部逻辑中完成赋值后，调用父组件传递的方法更新共享状态
    updateSearch() {
      const newQuery = "你的搜索内容";
      const newQueryWords = ["你", "的", "搜索", "内容"];
      this.props.setSearchData({ searchQuery: newQuery, searchQueryWords: newQueryWords });
    }
  }
  

• 在目标组件中读取状态：

  import { useSearchContext } from './SearchContext';
  
  function TargetComponent() {
    const { searchQuery, searchQueryWords } = useSearchContext();
    return (
      <div>
        <p>搜索关键词：{searchQuery}</p>
        <p>拆分词汇：{searchQueryWords.join(', ')}</p>
      </div>
    );
  }
  

2. 本地存储（localStorage/sessionStorage） #

因为Landing先加载、变量确定后才跳转，直接把数据存在本地存储是最简单的方式：

• Landing组件赋值后存储：

  class Landing extends Component {
    componentDidUpdate(prevProps, prevState) {
      // 当状态变化时写入本地存储
      if (prevState.searchQuery !== this.state.searchQuery || 
          prevState.searchQueryWords !== this.state.searchQueryWords) {
        localStorage.setItem('searchData', JSON.stringify({
          searchQuery: this.state.searchQuery,
          searchQueryWords: this.state.searchQueryWords
        }));
      }
    }
  }
  

• 目标组件读取：

  function TargetComponent() {
    const [searchData, setSearchData] = useState({
      searchQuery: "",
      searchQueryWords: []
    });
  
    useEffect(() => {
      const storedData = localStorage.getItem('searchData');
      if (storedData) setSearchData(JSON.parse(storedData));
    }, []);
  
    return (
      <div>
        <p>搜索关键词：{searchData.searchQuery}</p>
        <p>拆分词汇：{searchData.searchQueryWords.join(', ')}</p>
      </div>
    );
  }
  

临时数据推荐用sessionStorage（关闭浏览器清除），需要持久化则用localStorage。

3. 全局状态库（Redux/MobX） #

如果项目已经在用这类库，直接把变量放到全局状态：Landing组件触发action更新状态，目标组件通过connect或Hook订阅状态即可，适合复杂场景下的多组件状态同步。

二、基于父子组件关系的共享方式 #

如果必须依赖父子关系，核心是状态提升：

1. 找到Landing和目标组件的共同父组件，将searchQuery和searchQueryWords的状态从Landing移到这个父组件中。
2. 父组件给Landing传递更新状态的方法，让Landing在内部赋值时调用该方法更新父组件状态。
3. 父组件将两个变量作为props传递给目标组件。

示例代码：

// 共同父组件App
function App() {
  const [searchQuery, setSearchQuery] = useState("");
  const [searchQueryWords, setSearchQueryWords] = useState([]);

  const updateSearchData = (query, words) => {
    setSearchQuery(query);
    setSearchQueryWords(words);
  };

  return (
    <div>
      <Landing updateSearchData={updateSearchData} />
      <TargetComponent 
        searchQuery={searchQuery} 
        searchQueryWords={searchQueryWords} 
      />
    </div>
  );
}

// Landing组件
class Landing extends Component {
  someInternalFunction() {
    const newQuery = "测试搜索";
    const newWords = ["测试", "搜索"];
    this.props.updateSearchData(newQuery, newWords);
  }
}

// 目标组件
function TargetComponent({ searchQuery, searchQueryWords }) {
  return (
    <div>
      <p>搜索关键词：{searchQuery}</p>
      <p>拆分词汇：{searchQueryWords.join(', ')}</p>
    </div>
  );
}

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