Reactjs 反应访问根组件的道具

如何访问根组件的道具

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'，因为在代码的该部分：

此

引用了任何内容

您可以尝试以下方法：

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

出现此错误“无法读取未定义的属性'props'，因为在代码的该部分：

此

引用了任何内容

您可以尝试以下方法：

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

---

您是否为包含的元素提供了道具您是否为包含的元素提供了道具

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