Pass function down to child Component in React

问题:

I am trying to pass a function down to a child component in React. If I place the function within the ES6 class I have access to this.props.dispatch, but do not have access within mapStateToProps

Conversely when I define the function outside of the ES6 class I seem to have access to the function but not this.props.dispatch

Can someone identify what I am doing wrong to have both access to this.props.dispatch as well as having the function available in mapStateToProps function

import React, { Component } from 'react'; import { connect } from 'react-redux'; import DenomInput from '../denomInput/DenomInput.js'; import * as actions from '../../actions/countActions';  class CountableItems extends Component {   constructor(props) {     super(props);     this.onDenomChange = this.onDenomChange.bind(this);   }    onDenomChange = (value, denom) => {     this.props.dispatch(actions.increaseSum(value, denom));     console.log(value);   }    render() {     const props = this.props;      let denomGroups = props.denoms.map(function (denom, i) {       return (         Object.keys(denom).map(function (key) {           let denoms = denom[key].map(function (item, i) {             return <DenomInput denom={item} onDenomChange={props.onDenomChange} key={i}></DenomInput>           });           return (<div className="col"><h2>{key}</h2>{denoms}</div>)         })       );     });      return (       <div className="countable-item-wrapper">         <div className="row">           {denomGroups}         </div>       </div>     );   } }  function mapStateToProps(state, ownProps) {   return {     denoms: state.count.denomGroups,     onDenomChange: this.onDenomChange   } }  export default connect(mapStateToProps)(CountableItems); 

Here is the component that renders <CountableItems>

import React, { Component } from 'react'; import CountableItems from '../components/countableItems/CountableItems.js'; import CountSummary from '../components/countSummary/CountSummary.js';  import "./Count.css";  class Count extends Component {   render() {     return (       <div className="container">         <div className="row">           <div className="col-8">             <CountableItems />           </div>           <div className="col-4">             <CountSummary />           </div>         </div>       </div>     );   } } 

export default Count;

回答1:

You want to pass a reference to the CountableItems instance's onDenomChange property. You can do that by referencing this.onDenomChange like onDenomChange={this.onDenomChange}.

Important note: you need to use arrow functions () => {} in order for for this to reference the CountableItems instance inside your nested loops. Regular functions like function () {} would not use the correct context.

import React, { Component } from 'react'; import { connect } from 'react-redux'; import DenomInput from '../denomInput/DenomInput.js'; import * as actions from '../../actions/countActions';  class CountableItems extends Component {   onDenomChange = (value, denom) => {     this.props.dispatch(actions.increaseSum(value, denom));     console.log(value);   }    render() {     let denomGroups = this.props.denoms.map((denom, i) => {       return (         Object.keys(denom).map((key) => {           let denoms = denom[key].map((item, i) => {             return <DenomInput denom={item} onDenomChange={this.onDenomChange} key={i}></DenomInput>           });           return (<div className="col"><h2>{key}</h2>{denoms}</div>)         })       );     });      return (       <div className="countable-item-wrapper">         <div className="row">           {denomGroups}         </div>       </div>     );   } }  function mapStateToProps(state, ownProps) {   return {     denoms: state.count.denomGroups,   } }  export default connect(mapStateToProps)(CountableItems); 

文章来源: Pass function down to child Component in React