Question

我在将id传递给每个依赖id时遇到问题。

我有一个组件列表（具有不同的道具），需要向每个组件添加交互，该页面的链接取决于id。

export const ResultItem = (id) =>

         <div>
            <Link to={{ 
                  pathname: `/idea/${id}`,
                }}><button>View Recipe</button></Link>
          </div>
;

以后在子组件中，我需要访问此ID才能使API调用到端点，并具有特定的ID以获取数据并呈现它们。

class Component extends Component{

  componentDidMount() {

    // how can i declare variable depends on id here (i have id in url too

    axios
    fetch('http://localhost:50647/fund/GetFund/{id}')
    (API CALL LOGIC)
  }

  render(){
      return(
          <div>  
          </div>
      )
  }
};

如何通过链接将id传递给子组件并将其声明为变量以使API CALL取决于id？

Answer 1

您可以在页面组件内部获取如下ID：

this.props.match.params.id

使用withRouter(component)

componentDidMount() {
  axios.fetch('http://localhost:50647/fund/GetFund/{this.props.match.params.id}')
}

Answer 2

如果您使用react-router，则可以使用：

this.props.match.params.id

访问路径变量（路径参数）。

请注意，您应将其与Router HOC一起使用，以访问道具中的路由信息。

export default withRouter(MyComponent);

Answer 3

如果其他答案对您不起作用，也许您可以尝试：

const linkCustomProps = { id: 4 };
const toObject = { pathname: "/", customProps: linkCustomProps };
<Link to={toObject}>Click me</Link>;

然后您可以通过以下方式访问值：

this.props.location.customProps.id

顺便说一句，我在特定情况下使用客户端HashRouting。

将ID传递给每个<link />

3 个答案: