Question

我有一个bootstrap模态组件，其中包含一个博客表单，我们可以在其中创建新博客或编辑现有博客。当我选择要编辑的博客然后在模态组件中，我们调用ajax然后自动填充表单数据。

My Parent Component看起来像这样。

class Dashboard extends React.Component {
  ...
  editSelectedBlog(blog){
    this.setState({ selectedBlog: blog, modalShown: true, blogEditing: true }, this.showModal)
  }

  showNewBlogModal() {
    this.setState({ modalShown: true, blogEditing: false }, this.showModal)
  }

  showModal() {
    $('#addBlog').modal('show')
  }

  hideModal(updateBlogs = false) {
    this.setState({ modalShown: false, blogEditing: false })
    if (updateBlogs) { // call ajax and fetch updated blogs }
  }

  render() {
    ...
    <Blogs>
      {blogs.map((blog) => {
        return (
          <Blog
            key={shortid.generate()}
            blog={blog}
            onEditItem={this.editSelectedBlog}
          />
        )
      }
      )}
    </Blogs>
    {modalShown &&
      <BlogModal
        postApi={someUrl}
        selectedBlogId={this.state.selectedBlog? this.state.selectedBlog.id : undefined}
        onModalHide={this.hideModal}

      />
    }
    <div role="presentation" onClick={this.showNewBlogModal} > Add new blog
    </div>
  }
}

我的博客模态组件看起来像这样。

class BlogModal extends React.Component {
  ...
  componentWillMount() {
    if(selectedBlogId){ // call ajax for blog using blog id and set blog form data }
  }

  render() {
    const isEditing = this.props.selectedBlogId !== undefined
    return (
      ....
      {isEditing ? (
          <button type="button" onClick={this.editSelectedBlog}>Update</button>
        ) : (
          <button type="button" onClick={this.addNewBlog}>Save</button>
        )
      }
    )
  }

BlogModal.defaultProps = {
  blog: {
    title: '',
    date: '',
    content: ''
  }
}

这种隐藏模式的方式是建议在componentWillMount方法中调用ajax，还是应该删除modalShown条件并始终保留模态，然后在{{1}中处理ajax请求进行编辑} componentWillRecieveProps的方法？

Answer 1

首先，您应该在componentDidMount()中进行ajax调用。

React docs suggest这是执行网络请求/副作用的最佳位置，而不是componentWillMount()。

其次，我认为您在Dashboard和BlogModal中使用逻辑的方式并不理想。相反，我会将获取的博客数据移出BlogModal并将其放入仪表板中。这样，您的BlogModal只关心＆＃34;呈现＆＃34;用户界面。这是一个通常被称为容器和表示组件或智能和哑组件的概念。丹·阿布拉莫夫对a good article这个概念有所了解。

使用React中的componentWillRecieveProps隐藏组件与处理道具

1 个答案: