Redux：将组件动态传递给 Provider

Question

我正在尝试创建一个动态接受提供程序组件的函数。我当然可以只将商店添加到组件中，但为了简单起见，我想尝试通过函数参数传递它。

例如，我希望能够通过传入 MyComponent:

来动态创建它

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

然而，这从 React 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.

我也试过在组件传入store之后再添加，但是这是被禁止的。如何将智能组件动态传递给 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 调用。但是大写元素被视为组件，因此传递 "naked"，而小写元素被视为 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" />;
}

Redux：将组件动态传递给 Provider

Redux: Dynamically pass component to Provider

reactjs

redux