reactjs - 使用 React 路由器查询参数

Question

我想知道是否可以在类组件中应用此逻辑？如果是的话，我会把（{匹配}）放在哪里

const Topics = ({ match }) => (
  <div> 
    This is a topics
    <div>
    {data.map((item, id) => <div key={id}><Link to={{
      pathname: `${match.url}/${item._id}`,
      state: item
    }}>{item.name}</Link> </div>)}

    </div>
    <hr />
    <Route path={`${match.path}/:id`} component={Topic} />

  </div>
);

标签： reactjsreact-router

Answer 1

this.props您可以使用类组件访问渲染中的道具

class Topics extends React.Component {
    render(){
        const { match } = this.props;
        return (
          <div> 
            This is a topics
            <div>
            {data.map((item, id) => <div key={id}><Link to={{
              pathname: `${match.url}/${item._id}`,
              state: item
            }}>{item.name}</Link> </div>)}

            </div>
            <hr />
            <Route path={`${match.path}/:id`} component={Topic} />

          </div>
        );
    }
}