Question

我没有说明，但确实有逻辑。一个简单的映射。使其成为无状态的过程是什么？

import React from 'react';
import BMFave from './BMFave.jsx';

class BMTag extends React.Component {
  constructor(props) {
    super(props);
  }
  render () {
    const bookmarks = this.props.bookmarks.map((bookmark) =>
      <BMFave bookmark={bookmark} key={bookmark.id} />
    );
    return (
      <div className="bookmark_page" id="{this.props.tag}" >
        <div className="bookmark_tag_title">
          <p className="bookmark_tag_title_p">
            {this.props.tag}
          </p>
        </div>
        {bookmarks}
      </div>
    )
  }
}

export default BMTag;

Answer 1

无国籍并不意味着没有逻辑，它意味着没有国家。所以你已经在那里了。

当然你可以简化：

export default ({bookmarks, tag})=> (
  <div className="bookmark_page" id={tag} >
    <div className="bookmark_tag_title">
      <p className="bookmark_tag_title_p">
        {tag}
      </p>
    </div>

    {
      bookmarks.map(bm=> <BMFave bookmark={bm} key={bm.id} />)
    }
  </div>
)

Answer 2

不确定。只需将您的映射函数移到函数外部即可。如果你愿意的话，你也可以把它留在里面，但这不是最好的做法，因为它会在每个渲染上重新创建（我认为）。

import React from 'react';
import BMFave from './BMFave.jsx';

const constructBookmarks = (bookmarks) => {
  return bookmarks.map((bookmark) =>
    <BMFave bookmark={bookmark} key={bookmark.id} />
  );
};

export default (props) => {
  return (
    <div className="bookmark_page" id={props.tag} >
      <div className="bookmark_tag_title">
        <p className="bookmark_tag_title_p">
          {props.tag}
        </p>
      </div>
      {constructBookmarks(props.bookmarks)}
    </div>
  );
};

Answer 3

只要您的组件没有状态且不使用React lifecycle methods或refs，它就可以是无状态组件。

 const BMTag = props => {
    const bookmarks = props.bookmarks.map((bookmark) =>
       <BMFave bookmark={bookmark} key={bookmark.id} />);

    return (
      <div className="bookmark_page" id="{props.tag}" >
        <div className="bookmark_tag_title">
          <p className="bookmark_tag_title_p">
            {props.tag}
          </p>
        </div>
        {bookmarks}
      </div>
    )
  }

export default BMTag;

有关详细信息，请查看有关Presentational and Container Components by Dan Abramov。

的文章

我可以将此React组件设为无状态吗？

3 个答案: