如何在 React 中不调用该组件的情况下将数据从一个组件发送到另一个组件？

Question

如何将我在 Homepage.js 组件中获取的 room.id 数据发送到 Player.js 组件？ 在此之前，我在 App.js 中使用了 PrivateRouter 组件。 因此，我的工作变得非常困难，因为我无法在使用 Link 路由路由时直接调用组件。

主页.js

 <Heading as="h1" mb={6}>
            Rooms
            </Heading>
            <Divider orientation="horizontal" />
           {rooms.map((room)=> (
              <ListItem>
              <ListItemText primary={room.roomName} secondary={room.roomInfo}/>
             
               {/* <Link to={`/room/${room.id}`}></Link> */}
            
                <Link to={`/room/${room.id}`}>
                <Button>
                Join Room
                </Button>
                </Link>
                
              </ListItem>))}
       </GridItem>

应用程序.js

function App() {
  return (
    <Router>
      <Layout>
        <Switch>
          <PrivateRoute exact path="/">
            <Homepage />
          </PrivateRoute>
          <PrivateRoute exact path="/create-room">
            <CreateRoom />
          </PrivateRoute>
          <PrivateRoute exact path="/contribute">
            <Contribute />
          </PrivateRoute>
          <PrivateRoute exact path="/room/:id">
            <Player />
          </PrivateRoute>
          <Route path="/login">
            <LoginForm />
          </Route>
          <Route path="/confirm">
            <ConfirmForm />
          </Route>
          <Route>
            <NotFound />
          </Route>
        </Switch>
      </Layout>
    </Router>
  );
}

最后，player.js

class Player extends Component {
  constructor(){
    super();
    const params = this.getHashParams(); 
    this.state = {
      logeedIn : params.access_token ? true : false,
      currentStatus: false,
      rooms: {
      roomAdminMail: "",
      roomName: "",
      roomInfo: ""
      }, 
      nowPlaying: {
        artist_name : 'Not Checked',
        song_name: 'Not Checked',
        image: ''
      }
    }
    

    this.getNowPlaying = this.getNowPlaying.bind(this);
    this.getRoomInfo = this.getRoomInfo.bind(this);
    

    if(params.access_token){
      spotifyWebApi.setAccessToken(params.access_token);
    }
   
  }

  getRoomInfo = () => {
    const db = firebase.firestore();
    db.collection('rooms').doc("H5H2XjdwCyrsAboQeRxT").get()
    .then((doc) => {
        if (doc.exists) {
          this.setState( {
            rooms: {
              roomAdminMail: doc.data().roomAdminMail,
              roomName: doc.data().roomName,
              roomInfo: doc.data().roomInfo
            }
          })
          
        } else {
           console.log("No such document!");
        }
      }
      
    )
  }

我想要的只是将我在将 homepage.js 中的链接路由到 Player.js 中的 getRoomInfo function 时使用的 room.id 发送，即使其可用作 db.collection('rooms').doc(roomId).get ()

Answer 1

在player.js ，您可以使用this.props.match.params.id 。

match.params是从 URL 解析的键/值对，对应于路径的动态段

更多信息在这里： https://reactrouter.com/web/api/match

Answer 2

使用事件。 CustomEvent是您可以开始使用的一种原生解决方案，也可以使用事件总线。