Question

尝试从ListItem访问和渲染项目道具到预览组件。

   .main-container {
    background-color: #ff00ff;
    width: 300px;
    margin: auto;
    padding:0;
    height:calc(100vh - 60px);
   }

我点击链接，

我被重定向到const RecipeListItem = (props) => { return ( <Card> <Link to={`/recipes/${props.recipe.id}`}> <Image src={props.recipe.url} /> </Link> <Card.Content> <Card.Header> {props.recipe.title} </Card.Header> <Card.Description> {props.recipe.description} </Card.Description> </Card.Content> </Card> ) } export default RecipeListItem;

我看到预览组件，但无法访问带有Id：1道具的项目以在页面上呈现它。

这是我的预览组件：

http://localhost:3000/recipes/1

路线：

const RecipePreview = (props) => {
    return (
      <Card>
        <Image src={props.match.params.url} />
        <Card.Content>
          <Card.Header>
            {props.match.params.title}
          </Card.Header>
          <Card.Description>
            {props.match.params.description}
          </Card.Description>
        </Card.Content>
      </Card>
    )
}

export default RecipePreview;

我正在迭代的样本数据如下所示：

const Main = () => (
  <main>
    <Switch>
      <Route exact path='/recipes' component={RecipeList}/>
      <Route path='/create' component={AddRecipe}/>
      <Route path='/recipes/:recipeId' component={RecipePreview}/>
    </Switch>
  </main>
)

export default Main;

Answer 1

由于您的预览组件是一个类，因此您需要使用this.props.xyz代替props.xyz来访问道具中的xyz字段。

编辑：

您需要将食谱集合传递给预览组件。您可以从props.match.params获得的唯一内容是您传入的recipeId。（阅读：https://reacttraining.com/react-router/web/api/match）

您需要搜索食谱集合以根据参数中传递的recipeId获取食谱，并使用它来呈现各种信息。

要传递食谱集合，您的路线需要更改为

<Route path='/recipes/:recipeId' render={(props)=><RecipePreview recipes={this.recipes}/>}/>

（读：https://reacttraining.com/react-router/web/api/Route）

如何通过Link to Preview组件传递Item props？

1 个答案: