在reactjs中将值从一个组件共享到另一个组件

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

class ParentComponent extends React.Component {
  render() {
    const sharedValue = "Shared Value";
    return (
      <ChildComponent sharedValue={sharedValue} />
    );
  }
}

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

class ChildComponent extends React.Component {
  render() {
    const { sharedValue } = this.props;
    return (
      <div>{sharedValue}</div>
    );
  }
}

// SharedValueContext.js
import React from 'react';

const SharedValueContext = React.createContext();

export default SharedValueContext;

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';
import SharedValueContext from './SharedValueContext';

class ParentComponent extends React.Component {
  render() {
    const sharedValue = "Shared Value";
    return (
      <SharedValueContext.Provider value={sharedValue}>
        <ChildComponent />
      </SharedValueContext.Provider>
    );
  }
}

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

class ChildComponent extends React.Component {
  static contextType = SharedValueContext;
  
  render() {
    const sharedValue = this.context;
    return (
      <div>{sharedValue}</div>
    );
  }
}

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

const initialState = {
  sharedValue: "Shared Value"
};

const reducer = (state = initialState, action) => {
  return state;
};

const store = createStore(reducer);

export default store;

// ParentComponent.js
import React from 'react';
import { connect } from 'react-redux';

class ParentComponent extends React.Component {
  render() {
    const { sharedValue } = this.props;
    return (
      <div>{sharedValue}</div>
    );
  }
}

const mapStateToProps = state => {
  return {
    sharedValue: state.sharedValue
  };
};

export default connect(mapStateToProps)(ParentComponent);

// ChildComponent.js
import React from 'react';
import { connect } from 'react-redux';

class ChildComponent extends React.Component {
  render() {
    const { sharedValue } = this.props;
    return (
      <div>{sharedValue}</div>
    );
  }
}

const mapStateToProps = state => {
  return {
    sharedValue: state.sharedValue
  };
};

export default connect(mapStateToProps)(ChildComponent);