Question

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>
    )
  }
}

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

Answer 1

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

但是不要忘记使用propType运送它，它会节省你很多时间（通过类型检查来捕获错误）。

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

Answer 2

你可以拥有这样的属性，但是你需要记住，当你在这样的属性中存储一些值时，react不会重新呈现一个组件 - 所以如果你在render中使用那个值，你可能看不到更新的值。 setState并非如此。如果你有某些状态，然后更新状态react将重新呈现组件。

有一些关于放入州的指南（来自Dan Abramov），简短摘要：

如果您可以使用道具计算某些内容，则无需将该数据置于状态
如果您没有在渲染方法中使用某些东西，则无需将其置于状态
在其他情况下，您可以将该数据存储在州

Answer 3

我认为您指的是将videoList存储在Component实例上？

您可以将视频列表存储在状态中，但似乎无需执行此操作，我会将VideoList简化为events，将呈现的视频列表呈现为道具：< / p>

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

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

此外，在渲染项目列表时，您应该在渲染时为每个VideoListItem提供某种独特的ES6 Destructuring，例如。

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

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

3 个答案: