Redux：將組件動態傳遞給Provider

Question

我正在嘗試創建一個動態接受Provider的組件的函數。我當然可以將商店添加到組件，但爲了簡單起見，我想嘗試通過函數參數傳遞它。

例如，我希望能夠通過傳遞MyComponent動態創建的：

ReactDOM.render(
    <Provider store={reduxStore}> 
    <MyComponent /> 
    </Provider>, 
    $('.my-component)[0] 
) 

然而，這不再工作爲0.14作出反應的。

let provideComponent = function(selector, store, componentCallback) { 
    ReactDOM.render(
    <Provider store={store}> 
     componentCallback() 
    </Provider>, 
    $(selector)[0] 
) 
} 

provideComponent('.my-component', reduxStore, function() { 
    return <MyComponent /> 
} 

# raises error 
# Warning: Failed propType: Invalid prop `children` supplied to `Provider`, expected a single ReactElement. 

我也嘗試添加存儲到組件後傳入，但這是禁止的。我如何動態地將智能組件傳遞給Redux提供者？

Answer 1

試試這個：

let provideComponent = function(selector, store, componentCallback) { 
    var Component = componentCallback(); 

    ReactDOM.render(
    <Provider store={store}> 
     <Component /> 
    </Provider>,  
    $(selector)[0] 
) 
} 

provideComponent('.my-component', reduxStore, function() { 
    return MyComponent; 
} 

記住，JSX是區分大小寫的。大寫和小寫元素都被轉換爲React.createElement調用。但是上殼體元件被視爲組件，並由此通過「裸露的」，而下殼體元件都被視爲DOM元素，並通過作爲字符串：

<div> 
    <Component /> 
</div> 

被轉換到：

React.createElement('div', {}, 
    React.createElement(Component, {}) 
) 

通知<div>變成'div'（引號），而<Component />變成Component（不含引號）。

*編輯*

如果你希望你的回調來指定，而不是ReactDOM.render()通話過程中通過他們的道具，你會做這樣的事情：

let provideComponent = function(selector, store, componentCallback) { 
    ReactDOM.render(
    <Provider store={store}> 
     {componentCallback()} 
    </Provider>,  
    $(selector)[0] 
) 
} 

// Return the actual element, instead of just the type 
provideComponent('.my-component', reduxStore, function() { 
    return <MyComponent prop1="value" prop2="value" />; 
}