React.js中点击按钮后如何设置并调用props？

你需要在App组件中引入状态管理跟踪加入请求的审核状态，将状态作为props传递给Room组件，点击按钮时触发状态更新，同步到Room组件即可实现需求，完整修改如下：

第一步：修改App.js #

首先引入React的useState Hook管理加入状态，点击按钮时触发状态变更：

import { useState } from 'react';
import { Button, Link } from '@mui/material'; // 用到的组件提前导入
import Room from './Room';

function App() {
  // 三个状态：idle=未发起请求 / waiting=等待审核 / joined=已通过
  const [joinStatus, setJoinStatus] = useState('idle');
  // 通知moderator有用户申请加入的逻辑
  const handleJoinRequest = () => {
    setJoinStatus('waiting');
    // 这里替换为真实的接口请求/websocket监听，等moderator同意后触发setJoinStatus('joined')
    // 下方为模拟moderator3秒后同意请求的逻辑，可删除替换为真实业务
    setTimeout(() => {
      setJoinStatus('joined');
    }, 3000)
  }

  return (
    <div className="App">
      <h1>Props</h1>
      <Room name={joinStatus} />
      <Button 
        variant="contained" 
        color="primary" 
        onClick={handleJoinRequest}
        // 只有审核通过后才允许跳转，也可以根据业务逻辑提前跳转后在Room页处理等待逻辑
        component={joinStatus === 'joined' ? Link : 'button'} 
        to={joinStatus === 'joined' ? `/${data}` : '#'}
      >
        Join Room
      </Button>
    </div>
  );
}

export default App;

第二步：修改Room.js #

接收传递的name属性，根据不同状态渲染对应内容即可：

function Room(props){
    if(props.name == "joined"){
        console.log("Accept")
        return <div>已成功进入房间</div>
    } else if(props.name == "waiting"){
        console.log("Wait")
        return <div>正在等待主持人审核，请稍候</div>
    } else {
        return <div>请点击加入房间按钮申请进入</div>
    }
}

export default Room;

• 如果你需要点击按钮后先跳转到Room页面再等待审核，只需要把状态管理逻辑移到Room组件，在Room组件挂载时发起加入请求即可
• 真实业务中可删除模拟同意的setTimeout逻辑，对接后端审核回调或者websocket推送，收到moderator同意的通知后再修改状态即可

内容的提问来源于stack exchange，提问作者Summer Winter