在从mapDispatchToProps传递函数的容器组分反应/终极版应用

我渲染RootComponent：在从mapDispatchToProps传递函数的容器组分反应/终极版应用

//RENDERING ROOT COMPONENT------------------------------------------------------------------------------- 
ReactDOM.render(

    <Provider store={store}> 
     <RootComponent /> 
    </Provider>, 

    document.getElementById('app')); 
//RENDERING ROOT COMPONENT-------------------------------------------------------------------------------

RootComponent仅具有一个容器，包括：

//ROOT COMPONENT---------------------------------------------------------------------------------------------------- 
const RootComponent =() => (

    <div> 
     <BookListContainer />   
    </div> 

); 
//ROOT COMPONENT----------------------------------------------------------------------------------------------------

BooklistContainer：

//BOOKLIST CONTAINER------------------------------------------------------------------------------------------------------- 
class BookListContainer extends Component{ 

    componentWillMount(){ 
     console.log('componentWillMount executing...'); 
     () => this.props.ajaxRequestTriggeredMethod(); 
    } 

    render() { 
     return (
      <div> 
       <BooksList DataInputParam={this.props.books} BtnClickHandler={this.props.buttonClickedMethod} />    
      </div> 
     ); 
    } 
} 


const mapStateToProps = (state) => { 
    return{ 
     books: state.BooksReducer 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     buttonClickedMethod:() => dispatch({type: 'BUTTON_CLICKED'}), 
     ajaxRequestTriggeredMethod:() => console.log('ajaxRequestTriggeredMethod is consoled...') 
    }; 
}; 

connect(mapStateToProps, mapDispatchToProps)(BookListContainer); 
//BOOKLIST CONTAINER-------------------------------------------------------------------------------------------------------

所有成分都在此刻一个js文件，所以我不会导出/导入除了标准库什么...

结果：我得到“componentWillMount执行......”在控制台消息，但不得到'ajaxRequestTriggeredMethod的安慰......' MESSA GE。另外，控制台中不显示任何错误。

来源

2017-08-17 vshnukrshna

不是专家，但connect()函数返回

A higher-order React component class that passes state and action creators into your component derived from the supplied arguments

所以我的猜测是做这样的事情：

const randomNameForComponent = connect(mapStatetoProps, mapDispatchToProps)(BookListContainer); 
export default randomNameForComponent;

，并在您RootComponent，渲染randomNameForComponent代替BookListComponent 。

它应该做的伎俩。

来源

2017-08-17 11:31:32

谢谢，@GaetanBoyals，它的工作原理！但现在我只是想说明一个方面：据我了解每个_container component_ a.k.a _smart component_“连接”其子组件商店。现在，在这种特殊情况下，什么应该被看作是一个容器组件：** ** BookListContainer **或** randomNameForComponent或两者？ – vshnukrshna

没有问题，我也挣扎与连接时间长;）至于你的问题，这将是** ** randomNameForComponent，因为[此链接（https用作声明：//计算器。com/questions/43414254/component-and-container-in-react-redux）作为接受的答案，“容器组件是一个反应组件，与Redux管理的状态直接相关，也称为”智能组件'“。另外，如果我的答案解决了问题，请您将其标记为正确的？谢谢:) –

好的，谢谢你的帮助！ – vshnukrshna

它，因为你没有执行箭头的功能。您可以直接调用此方法。

componentWillMount(){ 
    console.log('componentWillMount executing...'); 
    this.props.ajaxRequestTriggeredMethod(); //Invoke directly 
}

来源

2017-08-17 11:14:37 Dev

感谢您的回答，但似乎我在这里丢失了重要的东西：如果我这样做** this.props.ajaxRequestTriggeredMethod（）; **我得到一个错误：** Uncaught TypeError：this.props.ajaxRequestTriggeredMethod是不是一个功能** – vshnukrshna

@vshnukrshna对不起，我离开了一段时间。但正如Gaetan所建议的那样，你应该有容器组件，它可以处理连接和道具，并将道具传递给表示组件。在你的情况下，虽然，我认为你应该导出所连接的组件，出口默认连接（mapStateToProps，mapDispatchToProps）（BookListContainer）; – Dev

感谢您的帮助，@Dev！ – vshnukrshna

在从mapDispatchToProps传递函数的容器组分反应/终极版应用

回答

相关问题