如何使用来自另一个组件的状态？

Question

我对编程很陌生，我试着学会反应和动手-一些真正的项目。我正在尝试整理一个FreeCodeCamp鼓机程序，我被困在尝试使用一个从一个组件到另一个组件的状态。谢谢你们的帮助。

请参阅下面的源组件：

import React,{useState} from 'react';
import './DrumControl.scss';
import { Switch } from 'antd';
import 'antd/dist/antd.css';

const DrumControl = () => {
  const [isOn,setIsOn] = useState(false);
  const [bankName,setBankName] = useState("Heater 1");
  const [info,setInfo] = useState("");
  const onOff = () =>{
    isOn ? setIsOn(false) : setIsOn(true);
    setInfo("");
  }

  const changeBankName = ()=>{
      bankName === "Heater 1" ? setBankName("Piano") : setBankName("Heater 1");
      setInfo(bankName);
  }

  console.log(info);
  return (
    <div className="drum-control">
      <header>
        <a className="navbar-brand text-dark" href="#">
        ABC
        </a>
      </header>
      <p className="text-dark fw-bold">Power</p>
      <Switch onClick={onOff}/>
      <p id="display">{info}</p>

      <input type="range" className="form-range" min="0" max="100" id="volume-control"/>

      <p className="text-dark fw-bold">Bank</p>
      <Switch onClick={changeBankName}/>
    </div>
  );
}

export default DrumControl;

我试图在以下组件中使用上面代码中的bankName

import React,{useState} from 'react';
import {bankOne,bankTwo} from './Bank.js';
import {bankName} from './DrumControl';

const Drumpad = () =>{
  const [bank,setBank] = useState(bankOne);
  const changeBank = () =>{
    bankName === "Heater 1" ? setBank(bankOne) : setBank(bankTwo);
  }
  return(
    <h1 className="drum-pad">{bankOne[0].id}</h1>

  );
}

export default Drumpad;

不管怎么说还是换个办法来解决这个问题？

Answer 1

好的，现在全部排序，导入pubhub.js

https://www.npmjs.com/package/pubsub-js

鼓手出版社

  const pubsub = () =>{
    PubSub.publish('changeBank',{bankName})
  }

订阅鼓垫

  useEffect(
    ()=>{
      const mySub = PubSub.subscribe('changeBank',chooseBank);
      return () => {
        PubSub.unsubscribe(mySub);
      };
    },[]
  );

  const chooseBank = (changeBank,{bankName}) => {
    bankName === 'Heater 1' ? setBank(bankOne) : setBank(bankTwo);
  }