Question

我有两个组成部分，一个调用另一个。在这种情况下，我的组件Entries具有下面一行。

<TypeIcon typeicon={entry.type} />

此行调用以下组件TypeIcon。

import React from 'react';

import '../../App.css'




function TypeIcon (props){

  return (
    <span><i class="fa fa-file-text" aria-hidden="true"></i></span>
  )
}

export default TypeIcon

我想做的是对type值（显示文档图标或播放图标）进行一些条件渲染，该值已打开entry中的值。下面的JSON映射到entry：

[{
    "domain": "https://matangitonga.to",
    "publishdate": "2017-09-06",
    "title": "Tonga's general election set for November 16",
    "type": "article",
    "language": "EN",
    "event_id": 1,
    "id": 1,
    "url": "https://matangitonga.to/2017/09/06/tongas-general-election-set-november-16"
}]

我遇到的麻烦是如何将entry或entry.type正确传递到TypeIcon中。

Answer 1

如果您将值传递为

<TypeIcon typeicon={entry.type} />

然后您可以在子组件中访问它

{props.typeicon}

因为所有道具都通过props对象传递，而typeicon只是props对象中的键

如果您传递整个条目对象，则可以按以下方式访问子组件中的图标。

{props.typeicon.type}

因为整个条目对象成为键typeicon的值，并且要访问type属性，您必须更深入地访问它

如何在React中将值传递给子组件

1 个答案: