反應更新來自更高層次父級的子女

您可以看到LoginContainer.js包含組件Form和內部表單中有多個子級。在Form.js我循環的孩子添加一些自定義方法的兒童道具，並最終輸出它們。反應更新來自更高層次父級的子女

isFetching來自redux商店。

在LoginContainer中，當isFetching更改爲true時，FormButton組件不會接收新的prop值，因爲它由Form組件擁有。

我知道爲什麼會發生這種情況，因爲表單組件不會直接更改，也不會更新，因此孩子不會被重新渲染。

有沒有Form.js會更新子項的方法？

LoginContainer.js

@connect((store) => ({ 
     isFetching: store.users.isFetching, 
     error: store.users.error 
    }), (dispatch) => ({ 
     action: bindActionCreators(actionCreators, dispatch) 
    })) 
    class LoginContainer extends Component { 

     handleAuth(user) { 
     this.props.action.fetchAndHandleUser(user.email, user.password) 
     } 

      render() { 

       const { isFetching } = this.props 

       return (
        <h1>Login to VMS</h1> 
        <Form onFormSubmit={this.handleAuth} formClass={styles.loginForm}> 

         .... 

         <FormButton 
         type="submit" 
         buttonText="Login" 
         showLoader={isFetching} // default value is false 
         loaderText="Authenticating" /> 

        </Form> 
       ) 
      } 
     }

Form.js

class Form extends Component { 

     .... 

     componentWillMount() { 

     this.children = {} 
     this.inputs = {} 
     this.model = {} 

     this.registerInputs(this.props.children) 
     } 

     registerInputs(children) { 

     this.children = React.Children.map(children, (child) => { 

      if(child.props.name) { 
      return React.cloneElement(child, { 
       bindToForm: this.bindToForm, 
       unbindFromForm: this.unbindFromForm, 
       validate: this.validate 
      }) 
      } 

      if(child.props.children) { 
      this.registerInputs(child.props.children) 
      } 
      else { 
      return child 
      } 
     }) 
     } 

     render() { 
     return (
      <form onSubmit={this.handleSubmit} className={this.props.formClass}> 
      {this.children} 
      </form> 
     ) 
     } 
    }

來源

2017-07-14 Julez

是在LoginContainer.js中獲取道具嗎？ –

它來自redux商店，它的一個破壞道具 – Julez

你可以發佈該代碼？ –

綁定isFetching的狀態的值。然後在值更改時更新狀態以進行反應重新呈現。

來源

2017-07-14 15:08:39 error404

已經試過了。問題在於孩子不會退縮 – Julez

反應更新來自更高層次父級的子女

回答

相關問題