首页 文章

如何在ReactDOM.render方法中呈现Redux Container

提问于
浏览 次
2

例如：

在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

   }
}

当我渲染容器时，错误发生了

Uncaught Invariant Violation：无法在“Connect（Link）”的上下文或道具中找到“store” . 将根组件包装在一个，或者显式地将“store”作为prop传递给“Connect（Link）”

reactjs redux

1 回答

  • 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')
);
    回复于

相关问题