如何绕过不用在类中使用usePararms？[重复]

Question

我是新来的。所以我想把这段代码从react-router-dom-v4升级到react-router-dom-v6。我知道我们不能在v6中使用this . props . match . params . room code，我想知道如何升级它。任何帮助都将不胜感激。

import React, { Component } from "react";
import { useParams } from "react-router-dom";

function withHook(Component) { 
return function WrappedComponent(props) {
  const params = useParams();
// assuming :id is what you have on the route
  return <Room {...props} roomCode={params.id} />;
};
}

class Room extends Component {
constructor(props) {
super(props);
this.state = {
  votesToSkip: 2,
  guestsCanPause: false,
  isHost: false,
};
//props.roomCode is what you want
}

getRoomDetails() {
fetch("/api/get-room" + "?code=" + this.roomCode)
  .then((response) => response.json())
  .then((data) => {
    this.setState({
      votesToSkip: data.votes_to_skip,
      guestCanPause: data.guest_can_pause,
      isHost: data.is_host,
      });
    });
   }

  render() {
   return (
   <div>
    <h3>{this.state.roomCode}</h3>
    <p>Votes: {this.state.votesToSkip}</p>
    <p>Guests Can Pause: {this.state.guestsCanPause.toString()}</p>
    <p>Host: {this.state.isHost.toString()}</p>
  </div>
);
  }
 }

 export default withHook(Room);

Answer 1

类组件不支持挂钩

您不能在类组件内部使用钩子，但是您绝对可以在单个树中将类和函数组件与钩子混合使用。一个组件是一个类还是一个使用钩子的函数是该组件的实现细节。从长远来看，我们希望钩子成为人们编写React组件的主要方式。

https://react js . org/docs/hooks-FAQ . html # should-I-use-hooks-classes-or-a-mix-of-both

如果仍然不想将类组件转换为功能组件，请将 roomCode 作为 prop 添加到组件中，并使用 HOC 来完成繁重的工作。类似的东西

function withHook(Component) {
  return function WrappedComponent(props) {
    const params = useParams();
    // assuming :id is what you have on the route
    return <Room {...props} roomCode={params.id} />;
  }
}

class Room extends Component {
  constructor(props) {
    super(props);
    this.state = {
      votesToSkip: 2,
      guestsCanPause: false,
      isHost: false,
    };
    this.roomCode = this.props.roomCode;
  }

  render() {
    return (
        <div>
          <h3>{this.roomCode}</h3>
          <p>Votes: {this.state.votesToSkip}</p>
          <p>Guests Can Pause: {this.state.guestsCanPause.toString()}</p>
          <p>Host: {this.state.isHost.toString()}</p>
        </div>
    );
  }
}

export default withHook(Room)

或者迁移到功能组件。这一切都消失了。

  const Room = () => {
    const {id: roomCode} = useParams()
    const [roomState, setRoomState] = useState({
      votesToSkip: 2,
      guestsCanPause: false,
      isHost: false,
    })
    
    return (<div>Room details</div>)
  }

希望这有所帮助