Question

我必须在子组件中使用提取功能，但是我不知道如何在Route中发送道具。可以这样做吗？还是我必须以其他方式来做？

这是我父级组件中的路由：

<Route path={`/beers/:beerId`} component={Beer}/>

然后我想在子组件中使用访存：

    fetchData = () => {
    let url = `https://api.punkapi.com/v2/beers/${this.props.id}`;
    fetch(url, {method: 'get'}).then(resp => resp.json()).then((data) =>
        this.setState({
            data: data
        })
    );
};

Answer 1

如果您要从URL获取BeerId。可以从<Route path={`/beers/:beerId`} render={()=><Beer id={YOURID}/>}/>获取。

您也可以使用render方法以传统方式直接传递

this.props.id

如果您使用的是render方法，则可以使用this.props.match.params.beerId访问ID。但是，如果您使用'smtp_crypto' => 'ssl',来获取，则最好在URL中输入啤酒ID。

Answer 2

当Route匹配时，它将向其持有的组件注入三个道具：

location：有关当前位置的信息。
history：访问浏览器历史记录和浏览方法。
match：所有匹配的URL参数。

因此，在Beer组件中，您可以使用beerId和Ajax调用来访问URL参数match.params.beerId：

const {beerId} = this.props.match.params;

fetchData = () => {
    let url = `https://api.punkapi.com/v2/beers/${beerId}`;
    fetch(url, {method: 'get'}).then(resp => resp.json()).then((data) =>
        this.setState({
            data: data
        })
    );    
}

Answer 3

您需要使用路由的<Route path={`/beers/:beerId`} render={(props) => <Beer {...props} beerList={beerList} />} />属性。一个例子是：

beerList

其中prop是假设函数或变量，它作为<Beer />向下传递到Edittext组件。

更多信息：A Simple React Router v4 Tutorial

如何在React Router v4中向孩子发送道具？

3 个答案: