在react js中将变量从一个函数传递到另一个函数

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const variable = "Hello World";
  
  return (
    <div>
      <ChildComponent variable={variable} />
    </div>
  );
}

// 子组件
import React from 'react';

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

// 创建上下文对象
import React from 'react';
const MyContext = React.createContext();

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const variable = "Hello World";
  
  return (
    <MyContext.Provider value={variable}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 子组件
import React from 'react';
import MyContext from './MyContext';

function ChildComponent() {
  return (
    <MyContext.Consumer>
      {value => <div>{value}</div>}
    </MyContext.Consumer>
  );
}

// 定义Action和Reducer
const CHANGE_VARIABLE = 'CHANGE_VARIABLE';
function changeVariable(variable) {
  return {
    type: CHANGE_VARIABLE,
    payload: variable
  };
}

function variableReducer(state = '', action) {
  switch (action.type) {
    case CHANGE_VARIABLE:
      return action.payload;
    default:
      return state;
  }
}

// 创建Store
import { createStore } from 'redux';
const store = createStore(variableReducer);

// 父组件
import React from 'react';
import { useDispatch } from 'react-redux';
import ChildComponent from './ChildComponent';
import { changeVariable } from './actions';

function ParentComponent() {
  const dispatch = useDispatch();
  const variable = "Hello World";

  // 改变变量的值
  dispatch(changeVariable(variable));
  
  return (
    <div>
      <ChildComponent />
    </div>
  );
}

// 子组件
import React from 'react';
import { useSelector } from 'react-redux';

function ChildComponent() {
  const variable = useSelector(state => state.variable);
  
  return (
    <div>{variable}</div>
  );
}