Question

语法问题...我试图找出在较新的React const渲染方法中设置proptypes的位置。

在这个const中，我将在哪里放置propTypes：{...} block？

const PlaylistAlbumInfoOverlay = () => (

  <div className="playlist-album-info-overlay">
    <h2>Album Title</h2>
    <p className="album-kind">Private</p>
  </div>
);

export default PlaylistAlbumInfoOverlay;

Answer 1

类似于将propTypes附加到不使用ES7类属性语法（stage 1 proposal）的class的方式，您可以将它们作为箭头函数的属性附加：

const PlaylistAlbumInfoOverlay = () => (
  <div className="playlist-album-info-overlay">
    <h2>Album Title</h2>
    <p className="album-kind">Private</p>
  </div>
);

PlaylistAlbumInfoOverlay.propTypes = {
  // ...
};

export default PlaylistAlbumInfoOverlay;

Answer 2

documentation说：

它们是输入的纯函数变换，为零样板。但是，您仍可以指定.propTypes和 .defaultProps将它们设置为函数的属性...

所以你应该能够做到这一点：

const PlaylistAlbumInfoOverlay = () => (

  <div className="playlist-album-info-overlay">
    <h2>Album Title</h2>
    <p className="album-kind">Private</p>
  </div>
);

PlaylistAlbumInfoOverlay.propTypes = {
     text: React.PropTypes.string  //example
}

export default PlaylistAlbumInfoOverlay;

propTypes的React const render方法语法？

2 个答案: