Wie Redux Container in ReactDOM.render Methode

Question

Zum Beispiel machen:

In Link.js

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

In 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 

In App.js. Ich habe eine OnClick-Methode, um Link im laufenden Betrieb zu rendern.

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

    } 
} 

Wenn ich Behälter machen die Fehler passiert

Uncaught unveränderliche Verletzung: Konnte nicht "store" entweder im Rahmen oder Requisiten von "Connect (Link)" finden. Entweder die Wurzelkomponente in einem wickeln oder explizit „store“ als Stütze passieren zu „Connect (Link)

Answer 1

Sie haben Ihr store einzurichten.

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') 
);