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" />; 
}