Javascript 隐藏组件与使用组件处理道具将在React中接收道具

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

我的父组件看起来像这样

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: ''
  }
}

类仪表板扩展了React.Component{
...
editSelectedBlog（博客）{
this.setState（{selectedBlog:blog，modalShown:true，blogeediting:true}，this.showmodel）
}
showNewBlogModal（）{
this.setState（{modalShown:true，blogeediting:false}，this.showmodel）
}
showModal（）{
$（'#addBlog'）.modal（'show'））
}
hideModal（updateBlogs=false）{
this.setState（{modalShown:false，blogeediting:false}）
if（updateBlogs）{//调用ajax并获取更新的blog}
}
render（）{
...
{blogs.map（（blog）=>{
返回(
)
}
)}
{modalShown&&
}
添加新博客
}
}

我的博客模式组件如下所示

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: ''
  }
}

类blogmodel扩展React.Component{
...
组件willmount（）{
if（selectedBlogId）{//使用blog id为blog调用ajax并设置blog表单数据}
}
render（）{
const isEditing=this.props.selectedBlogId！==未定义
返回(
....
{i编辑(
使现代化
) : (
拯救
)
}
)
}
BlogModal.defaultProps={
博客：{
标题：“”，
日期：''，
内容：“”
}
}

---

这是一种隐藏模式，然后在

组件中调用ajax的方法，还是建议我删除
modalShown
条件，并始终保留模式，然后在
组件将接收到
BlogModal
方法中编辑ajax请求？
首先，您应该执行ajax改为调用componentDidMount（）

这是一个更好的执行网络请求/副作用的地方，而不是

componentWillMount（）

---

其次，我认为在仪表板和BlogModal中分散逻辑的方式并不理想。相反，我会将获取的博客数据移出BlogModal并放入仪表板。这样，你的BlogModal只关心“呈现”UI。这是一个通常被称为容器和表示组件或智能和哑组件的概念。Dan Abramov对这个概念有过介绍。

谢谢。另外，我在模式中有保存和更新按钮，分别用于创建新博客或更新现有博客。我是否也应该在父模式中移动Post/Put AjaxMethod？我认为这两种方法应该是modal的一部分，如果我错了，请告诉我。在这种情况下，我可能会让Dashboard只负责显示/隐藏BlogModal。然后将所有逻辑移到BlogModal。然后创建单独的组件来呈现按钮-例如BlogModalActions-和内容/表单-例如BlogBlogModal然后负责所有处理程序和async，它的子代接收回调作为调用的道具。也就是说，它们是表示性的。