Question

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

例如，我希望能够通过传递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.

我也尝试在传入后将商店添加到组件中，但这是禁止的。如何将智能组件动态传递给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个调用。但大写元素被视为组件，因此传递＆＃34;裸＆＃34;，而小写元素被视为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

1 个答案: