コンポーネントを非表示にして、コンポーネントWillRecievePropsを使用して小道具を処理する

Question

私は新しいブログを作成するか、既存のブログを編集するブログフォームを含むブートストラップモーダルコンポーネントを持っています。モーダルコンポーネントで編集するブログを選択すると、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: '' 
    } 
} 

は、モーダルを隠し、その後 componentWillMount方法でAJAXを呼び出すこの方法が推奨されますか私は modalShown条件を削除し、常にモーダルを維持し、その後 BlogModalの componentWillRecieveProps方法で編集するためのAJAXリクエストを処理する必要がありますか？

Answer 1

まず、componentDidMount()でajaxコールを行う必要があります。

React docs suggestこれはcomponentWillMount()ではなくネットワーク要求/副作用を実行するのに適した場所です。

第2に、ダッシュボードとBlogModalの両方にロジックを振りかける方法は理想的ではないと思います。代わりに、BlogModalから取り出したブログデータをダッシュ​​ボードに移動します。このようにして、あなたのBlogModalはUIを「プレゼンテーション」することだけを心配しています。これは、一般的にコンテナおよびプレゼンテーションコンポーネントまたはスマートおよびダムコンポーネントと呼ばれる概念です。ダン・アブラモフはこのコンセプトについてa good articleを持っています。