响应路由器-类组件(仅)-呈现页面- JSON文件

Question

我正在工作的反应路由器项目(我初学者)，以提高我的技能。

我的问题：

我有一个JSON文件(龙珠Z)。当我点击人物(如悟空)，我想展示他的传记。实际上，当我点击小悟空时，每一个人物的传记都会显示出来。

我知道如何使用函数组件(useLocation等)来实现它。但是我完全被wicth类组件卡住了，因为我不能在其中使用钩子，那么有什么好的方法来实现它呢？

这是一个项目：DBZ反应路线

谢谢

Answer 1

使用react-router-dom v6，我们可以使用useParams读取函数组件中的params键。使用class component，您可以编写一个特殊的函数来存档相同的东西。

高阶组件是接受组件并返回新组件的函数。

import { useParams } from 'react-router-dom'

function withParams(Component) {
  return props => <Component {...props} params={useParams()} />;
}

class Charbio extends React.Component {
  componentDidMount() {
    let { id } = this.props.params;
    // get the bio by id here
  }

  render() {
    return API.map((element) => {
      return <p>{element.bio}</p>;
    });
  }
}

export default withParams(Charbio);