反应更新来自更高层次父级的子女

您可以看到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

反应更新来自更高层次父级的子女

回答

相关问题