例如:
在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方法来动态渲染Link。
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)
”
答案 0 :(得分:6)
您忘了设置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')
);