从子组件角度调用父组件函数，从sessionStorage实时更新变量

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [variable, setVariable] = useState('');

  const updateVariable = (newValue) => {
    setVariable(newValue);
  };

  return (
    <div>
      <ChildComponent updateVariable={updateVariable} />
      <p>Variable value: {variable}</p>
    </div>
  );
}

export default ParentComponent;

import React from 'react';

function ChildComponent(props) {
  const handleClick = () => {
    props.updateVariable('New value from child component');
  };

  return (
    <button onClick={handleClick}>Update Variable</button>
  );
}

export default ChildComponent;

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

function App() {
  const [variable, setVariable] = useState('');

  useEffect(() => {
    const handleStorageChange = (event) => {
      if (event.storageArea === sessionStorage && event.key === 'myVariable') {
        setVariable(event.newValue);
      }
    };

    window.addEventListener('storage', handleStorageChange);

    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []);

  const updateVariable = () => {
    const newValue = 'New value from sessionStorage';
    sessionStorage.setItem('myVariable', newValue);
    setVariable(newValue);
  };

  return (
    <div>
      <button onClick={updateVariable}>Update Variable</button>
      <p>Variable value: {variable}</p>
    </div>
  );
}

export default App;