可以在反应组件中拥有自己的属性吗？

问题描述：

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

    this.videoList = props.videos.map((video) => { 
     return <VideoListItem video={video} /> 
    }) 
    } 

    render() { 
    return (
     <ul className="collection"> 
      {this.videoList} 
     </ul> 
    ) 
    } 
}

我只是想知道是否允许我在反应组件中拥有自己的属性。可以在反应组件中拥有自己的属性吗？

答

是有意义的有这样的属性，但只有当你不想渲染。既然你正在渲染它，它可能会更有意义，把它放在状态。因为如果您更新属性 - 就像现在一样，您可能无法在UI上看到新值。

您可以在放什么用下面的图片作为指导，而不是把状态：

它是由丹·阿布拉莫夫创建如果我没看错的。

感谢您的指导！这个指南可以帮助我很多:) – hytm

也许，我设置'this.videoList'的东西是我可以从道具计算出来的，所以它不应该设置为状态。 – hytm

答

嗯，可以在你的反应组件中拥有自己的属性。没有人会责怪你。

但是不要忘记用propType发货，它会为您节省很多时间（通过类型检查来捕获错误）。

参考：https://facebook.github.io/react/docs/typechecking-with-proptypes.html

答

我想你是指将videoList存储到组件实例？

你可以存储的状态的影片名单，但似乎不必要做到这一点，我将简化VideoList是一个stateless functional component呈现的传递中作为道具的影片名单：

const VideoList = ({ videos }) => (
    <ul className="collection"> 
    {videos.map(video => <VideoListItem video={video} />)} 
    </ul> 
);

的官方文档实际上并没有解释上面的语法，但它基本上是一个没有状态的React组件的语法糖，它只接受props。 ({ videos })语法为ES6 Destructuring。 VideoList组件接收props，并且此语法将props.videos作为组件上的变量提取。

此外，在渲染项目列表时，您应为每个VideoListItem提供某种唯一的key，例如，

<VideoListItem key={video.id} video={video} />

可以在反应组件中拥有自己的属性吗？

相关推荐