React.Получить доступ к реквизиту корневого компонента - PullRequest
0 голосов
/ 22 марта 2019

Как я могу получить доступ к реквизиту корневого компонента?

import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

import cartReducer from './store/cartReducer'
import AddToCart from './cart/addToCart.jsx'

const store = createStore(cartReducer);


render(<Provider store={store}><AddToCart clicked={this.props.onIncrementCounter} />
       </Provider>, document.getElementById('addToCart'));  

Возможно ли это?Потому что у меня ошибка: «Не удается прочитать свойство« props »из неопределенного».Я новичок в React.

Вот AddToCart компонент

import React, { Component } from 'react';
import { connect } from 'react-redux';

class AddToCart extends Component {
    constructor(props) {
        super(props);
    }
}

const mapStateToProps = state => {
    return {
        items: state.cartItems,
        count: state.cartItemCount
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onIncrementCounter: () => dispatch({ type: 'INCREMENT' })
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(AddToCart);

1 Ответ

2 голосов
/ 22 марта 2019

вы получили эту ошибку «Невозможно прочитать свойство« props »из неопределенного», потому что в этой части вашего кода: <AddToCart clicked={this.props.onIncrementCounter} /> this ссылается на что-либо

Вы можете попробовать этот подход:

import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

import cartReducer from './store/cartReducer'
import AddToCart from './cart/addToCart.jsx'

const store = createStore(cartReducer);


render(<Provider store={store}><AddToCart/>
       </Provider>, document.getElementById('addToCart'));  

AddToCart.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';

class AddToCart extends Component {
    constructor(props) {
        super(props);
    }

    render() {
      return (
        <div onClick={this.props.onIncrementCounter}>
          Increment
        </div>
      )
    }
}

const mapStateToProps = state => {
    return {
        items: state.cartItems,
        count: state.cartItemCount
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onIncrementCounter: () => dispatch({ type: 'INCREMENT' })
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(AddToCart);
...