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

Posted 2023-02-23

【中文标题】在自身内部反应 redux 渲染组件

【英文标题】：React redux render component inside itself

【发布时间】：2018-11-13 10:47:36

【问题描述】：

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

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 。

【参考方案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 不知道要听哪种形式，您最终将陷入无限循环。

【讨论】：

感谢分享解决方法，文章和嵌套文章也有类似问题。顺便说一句，您可能希望将 SubForm 声明放在渲染函数之外，以避免渲染问题：任何状态/调度更改都将导致重新声明 Subform 并完全重新加载（这发生在我的用例中）。

【参考方案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>
        )
    

【讨论】：

所以子组件连接不上(mapStateToProps, mapDispatchToProps)？我在 mapDispatchToProps 中有很多函数

@TyTrinh，是的，它可以获得这些值，只有当你渲染你现在还没有的连接组件时，如果你写const MyForm = connect( mapStateToProps, mapDispatchToProps )(Form); export default MyForm并像<MyForm url=subform.url />一样使用它