如何在 ReactDOM.render 方法中渲染 Redux Container答案

【问题标题】：How to render Redux Container in ReactDOM.render method如何在 ReactDOM.render 方法中渲染 Redux Container
【发布时间】：2016-05-17 07:16:32
【问题描述】：

例如：

在 Link.js 中

class Link extends React.Component {
   ... 
}
export default Link

在 LinkContainer.js 中

import { connect } from 'react-redux'
import Link from './Link'


const mapStateToProps = (state, ownProps) => {
  return {
    data: state.data
  }
}


const LinkContainer = connect(
  mapStateToProps
)(Link)

export default LinkContainer

在 App.js 中。我有一个 onClick 方法来即时渲染链接。

class App extends React.Component {
   ...
   onClick() {
      ReactDOM.render(<LinkContainer />,document.getElementById('link1')) //It doesn't work
     // ReactDOM.render(<Link />,document.getElementById('link1')) //It works

   }
}

当我渲染容器时发生错误

未捕获的不变违规：在“连接（链接）”的上下文或道具中找不到“商店”。要么将根组件包装在 a 中，要么将“store”作为道具显式传递给“Connect(Link)

【问题讨论】：

标签： reactjs redux

【解决方案1】：

您忘记设置您的store。

import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducer from './redux/reducers/reducer'; // Import your rootReducer here
const store = createStore(reducer);

ReactDOM.render(
    <Provider store={store}>
        <LinkContainer />
    </Provider>,
    document.getElementById('Link1')
);

【讨论】：