Question

我有三个文件

video_list.js

import React from 'react';
import VideoListItem from'./video_list_item';
const VideoList=(props)=>{
    const videoItems=props.vid.map(function(single){ 
            return <VideoListItem vidobject={single}/>
    })
        return (
            <ul className="col-md-4 list-group">
            {videoItems}
            </ul>
            );
    };

export default VideoList;

video_list_item.js

 import React from 'react';
 const VideoListItem=(props)=>{
    return <li>hello there</li>
 }

 export default VideoListItem;

index.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search';
import SearchBar from './components/search_bar';
import VideoList from './components/video_list';
const API_KEY="AIzaSyCJc1jURCORLEuk";

class App extends Component{
    constructor(props){
        super(props);

        this.state={videos:[]};
        YTSearch({key:API_KEY,term:'javascript'},(videosfetched)=>{
            this.setState({videos:videosfetched});
            });
    }
    render(){
    return (<div>
                <SearchBar></SearchBar>
                <VideoList vid={this.state.videos} />
            </div>
    ) ;
   }    
}
ReactDOM.render(<App />,document.querySelector('.container'));

我一直在观看React教程，该教程使YouTube成为克隆版，并且我对某些代码感到困惑。该代码来自视频。
1.在 video_list.js 文件中，我正在将道具从功能组件 VideoList 传递到其他功能组件 VideoListItem ，这有效吗？< br /> 我以为只有基于类的组件才能将prop传递给子组件。
2. map（）返回什么，bcz videoItems 存储 map（）返回的内容，我认为它什么也没返回因为作为回报，我们只是将道具传递给子组件 VideoListItem 3.当我在服务器上运行它时，输出是

你好
你好
你好
你好
你好

我不知道输出结果如何

Answer 1

1。在video_list.js文件中，我正在将一个道具从功能组件VideoList传递给其他功能组件VideoListItem，这有效吗？

是的，这是完全有效的。 VideoListItem将收到一个道具，可以通过

进行访问

props.vidobject

这将是VideoList视频数组中的一个项目。

2。map（）返回什么，bcz videoItems存储正在返回的map（），我认为它什么也没有返回，因为作为回报，我们只是将道具传递给子组件VideoListItem

map（）将函数作为其输入参数，它定义了数组中每个项目的转换，从该项目的现有类型到该函数的输出类型。

因此props.vid中的每个项目都将从视频转换为映射函数的输出：

<VideoListItem vidobject={single}/>

即它将创建一个VideoListItem React组件数组，每个索引在其中接收props.vid数组中的视频对象作为prop。

3。当我在服务器上运行它时，输出为

你好

这不足为奇。您正在拍摄一系列视频，目前只是说“将每个视频转换为以下React组件”：

<li>hello there</li>

通过在VideoListItem中的每个视频上使用属性，您可以更清楚地看到这一点-例如，如果每个视频都有ID，

<li>hello {props.vidobject.id}</li>

编辑**对评论的回复：

您正确地说“'VIdeoListItem'是video_list_item.js中定义的单个组件”。

这意味着VideoListItem在一个地方被定义了，但是React组件是可重用的-这是React重点的一部分。输入以下代码：

const VideoListItem = function(props) {
  return <div>Hello world</div>
}

<div id="example">
  <VideoListItem />
  <VideoListItem />
<div>

我在这里所做的是将组件 define 放在一个位置，但是我可以使用JSX将该组件放置在多个位置。想象一下...

div(
  VideoListItem(),
  VideoListItem(),
)

您多次“调用” VideoListItem函数，这意味着您将多次获得相同的输出。因此，以上将给出输出

Hello world
世界你好

您会看到多行输出，因为您编写的代码说“给我一个<\ VideoListItem>（它会打印“ hello world”）一次，用于数组中的每个项目videoItems”，因此很明显videoItems包含多个元素。您可以通过在App的render（）函数中编写以下代码来确认这一点：

console.log（this.state.videos.length）;

Answer 2

您在video_list.js中所做的工作将返回一个数组或一个大概是您从该YouTube API中获取的视频对象的列表，对于每个视频对象，您将在{内渲染一个视频项{1}}。

这就是为什么要用video_list_item.js映射video_list.js内的视频阵列，并且对于每个单独的视频对象，您都要map()或通过{渲染单个视频{1}}组件。

我建议您进一步了解return助手，因为它已经被广泛使用，您将像在本项目中一样，从中获得大量使用。

看起来您的video_list_item组件正在显示视频列表，然后map()组件又将通过App组件呈现所有不同的视频项。

您在video_list内创建了一个功能组件，因为该组件的目标只是在屏幕上呈现一些jsx，而与video_list_item组件相同。

基于类的组件并不是唯一可以通过video_list.js的组件，您可能会将video_list_item与props混淆。

问问自己，组件的目标是什么？

组件的目标是向用户显示内容或对用户交互做出反应。好吧，props的目的是在组件内部自定义这两件事，所以是的，将state从一个功能组件传递到另一个功能组件是有效的。

如果您正在考虑，则父组件不必是通过props的基于类的组件。

基于类的组件，用于复杂的逻辑，需要响应用户输入，您需要发出网络请求，然后您将要制作基于类的组件而不是功能组件。

从功能组件传递道具？

2 个答案: