Javascript 从更高级别的父级更新子级

如您所见，LoginContainer.js包含一个组件表单，表单中有多个子项。 在Form.js中，我在子对象上循环添加一些自定义方法到子对象道具，并最终输出它们

isFetching来自redux商店

在LoginContainer中，当

isFetching

更改为true时，FormButton组件不会收到新的属性值，因为它属于表单组件

我知道为什么会发生这种情况，因为表单组件不会直接更改，也不会更新，这样子项就不会被重新引用

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>
                )
            }
        }

@connect（（存储）=>({
isFetching:store.users.isFetching，
错误：store.users.error
})，（调度）=>({
操作：bindActionCreators（actionCreators，调度）
}))
类LoginContainer扩展组件{
handleAuth（用户）{
this.props.action.fetchAndHandleUser（user.email，user.password）
}
render（）{
const{isFetching}=this.props
返回(
登录到虚拟机
....
)
}
}

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>
        )
      }
    }

类表单扩展组件{
....
组件willmount（）{
this.children={}
this.inputs={}
this.model={}
this.registerinput（this.props.children）
}
注册人（儿童）{
this.children=React.children.map（children，（child）=>{
if（child.props.name）{
返回React.cloneElement（子级{
bindToForm:this.bindToForm，
取消绑定形式：this.unbindFromForm，
验证：这个。验证
})
}
if（child.props.children）{
this.registerinput（child.props.children）
}
否则{
返回儿童
}
})
}
render（）{
返回(
{这个。孩子们}
)
}
}

在状态下绑定isFetching的值。然后更新状态，当值更改为react re render时。

LoginContainer.js中的isFetching是一个道具吗？它来自redux存储，是一个已破坏的道具。您可以发布该代码吗？我编辑了我的帖子，当i console.log isFetching i从false更改为true时。所以我知道这是可行的。但是孩子们没有重新播放或接收新的道具。你打电话给registerInputs了吗？已经试过了。问题是孩子们不能重播