从另一个组件获取数据的正确方法-- ReactJS

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const data = '这是来自父组件的数据';

  return (
    <div>
      <ChildComponent dataFromParent={data} />
    </div>
  );
}

export default ParentComponent;

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      {props.dataFromParent}
    </div>
  );
}

export default ChildComponent;

import React from 'react';

const DataContext = React.createContext();

export default DataContext;

import React from 'react';
import DataContext from './DataContext';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const data = '这是来自父组件的数据';

  return (
    <DataContext.Provider value={data}>
      <ChildComponent />
    </DataContext.Provider>
  );
}

export default ParentComponent;

import React, { useContext } from 'react';
import DataContext from './DataContext';

function ChildComponent() {
  const data = useContext(DataContext);

  return (
    <div>
      {data}
    </div>
  );
}

export default ChildComponent;

// store.js
import { createStore } from 'redux';

const initialState = {
  data: '这是全局数据'
};

function reducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

// 在组件中使用
import React from 'react';
import { useSelector } from 'react-redux';

function DataDisplayComponent() {
  const data = useSelector(state => state.data);

  return (
    <div>
      {data}
    </div>
  );
}

export default DataDisplayComponent;

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

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

  return (
    <div>
      {data ? data.message : '加载中...'}
    </div>
  );
}

export default DataFetchingComponent;