在自身内部反应 redux 渲染组件

Question

我有一个表单组件，我想在表单内呈现一个可点击的链接。当人们单击该链接时，将在弹出窗口中呈现一个子表单。类似这样的东西

class Form extends React.Component{
    componentDidMount(){
       this.props.loadForm(this.props.url)
    }
    render(){
        const { subfrom, loadSubForm } = this.props;
        return(
          <form>
             <button onClick={()=>loadSubForm(url)}>Load Sub-Form</button>

             { /** Render Parent Form Here ***/ }

             { subform && <Popup><Form url={subform.url} /></Popup> }

          </form>
        )
    }
}

const mapStateToProps = (state) => {
    return{
       subform:state.getIn(["form",subform"])
    }
}
const mapDispatchToProps = (dispatch, props)  => {  
    return{
       loadForm: (route)=>{

           /** Ajax to load form **/
       }
       loadSubForm: (route) =>{
          dispatch(loadSubForm(route))
       }
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Form);

加载子表单时出现错误：

loadForm function is not props of Form 。

Answer 1

感谢@Shubham，它的工作。这是解决方案

 class Form extends React.Component{
        componentDidMount(){
           this.props.loadForm(this.props.url)
        }
        render(){
            const { subfrom, loadSubForm } = this.props;
            let SubForm =  connect(mapStateToProps,mapDispatchToProps)(Form);

            /** If you use Redux Form **/
            SubForm =   reduxForm({})(SubForm);
            return(
              <form>
                 <button onClick={()=>loadSubForm(url)}>Load Sub-Form</button>

                 { /** Render Parent Form Here ***/ }

                 { subform && <Popup><SubForm id="suform" url={subform.url} /></Popup> }

              </form>
            )
        }
    }

    const mapStateToProps = (state,props) => {
        const formid = props.id
        return{
           subform:state.getIn(["form",formid,subform"])
        }
    }
    const mapDispatchToProps = (dispatch, props)  => {  
        const formid = props.id
        return{
           loadForm: (route)=>{

               /** Ajax to load form **/
           }
           loadSubForm: (route) =>{
              dispatch(loadSubForm(route,formid))
           }
        }
    }

   /** If you use Redux Form **/
   Form =   reduxForm({})(Form);

    export default connect(
        mapStateToProps,
        mapDispatchToProps
    )(Form);

注意：我们需要将 Form ID 传递给组件和 reducer。否则，reducer 不知道要听哪种形式，您最终将陷入无限循环。

Answer 2

对于嵌套组件，您没有传递 loadForm 或 loadSubForm 函数，要么为它们的使用添加条件检查，要么也传递它们

class Form extends React.Component{
    componentDidMount(){
       this.props.loadForm(this.props.url)
    }
    render(){
        const { subform, loadSubForm } = this.props;
        return(
          <form>
             <button onClick={()=>loadSubForm(url)}>Load Sub-Form</button>

             { /** Render Parent Form Here ***/ }

             { subform && <Popup><Form url={subform.url} loadForm={() => {// do something here}} loadSubForm={() => { //whatever you wanna do here}}/></Popup> }

          </form>
        )
    }
}

或

class Form extends React.Component{
    componentDidMount(){
       this.props.loadForm && this.props.loadForm(this.props.url)
    }
    render(){
        const { subform, loadSubForm } = this.props;
        return(
          <form>
             <button onClick={()=>{loadSubForm && loadSubForm(url)}}>Load Sub-Form</button>

             { /** Render Parent Form Here ***/ }

             { subform && <Popup><Form url={subform.url} /></Popup> }

          </form>
        )
    }
}