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

【问题标题】：How can I send data from one component to another without calling that component in React?如何在 React 中不调用该组件的情况下将数据从一个组件发送到另一个组件？
【发布时间】：2021-05-08 16:16:48
【问题描述】：

如何将我在 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>

app.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 中路由链接时使用的 room.id 发送到 Player.js 中的 getRoomInfo 函数，即使其可用作 db.collection('rooms').doc(roomId ).get()

【问题讨论】：

标签： javascript reactjs routes

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

使用事件。 CustomEvent 是您可以开始使用的一种本机解决方案，也可以使用 event bus。

【讨论】：