在 React 中将函数传递给子组件
[英] Pass function down to child Component in React
本文介绍了在 React 中将函数传递给子组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将一个函数传递给 React 中的子组件.如果我将函数放在 ES6 类中，我可以访问 this.props.dispatch，但在 mapStateToProps
中没有访问权限
相反，当我在 ES6 类之外定义函数时，我似乎可以访问该函数，但不能访问 this.props.dispatch
有人可以识别我在访问 this.props.dispatch 以及在 mapStateToProps 函数中可用的函数的错误
import React, { Component } from 'react';从'react-redux'导入{连接}；从'../denomInput/DenomInput.js'导入DenomInput；从'../../actions/countActions'导入*作为动作；类 CountableItems 扩展组件 {构造函数(道具){超级(道具)；this.onDenomChange = this.onDenomChange.bind(this);}onDenomChange = (value, denom) =>{this.props.dispatch(actions.increaseSum(value, denom));控制台日志(值)；}使成为() {const props = this.props;让 denomGroups = props.denoms.map(function (denom, i) {返回 (Object.keys(denom).map(function (key) {让 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>)}));});返回 (<div className="countable-item-wrapper"><div className="row">{denomGroups}
);}}函数 mapStateToProps(state, ownProps) {返回 {denoms: state.count.denomGroups,onDenomChange: this.onDenomChange}}导出默认连接(mapStateToProps)(CountableItems)；
这里是渲染
的组件
import React, { Component } from 'react';从 '../components/countableItems/CountableItems.js' 导入 CountableItems；从 '../components/countSummary/CountSummary.js' 导入 CountSummary；导入./Count.css"；类计数扩展组件{使成为() {返回 (<div className="容器"><div className="row"><div className="col-8"><CountableItems/>
<div className="col-4"><CountSummary/>
);}}
导出默认计数；
解决方案
您想传递对 CountableItems 实例的 onDenomChange 属性的引用.你可以通过像 onDenomChange={this.onDenomChange} 一样引用 this.onDenomChange 来做到这一点.
重要提示:你需要使用箭头函数() =>{} 以便 this 引用嵌套循环内的 CountableItems 实例.像 function () {} 这样的常规函数不会使用正确的上下文.
import React, { Component } from 'react';从'react-redux'导入{连接}；从'../denomInput/DenomInput.js'导入DenomInput；从'../../actions/countActions'导入*作为动作；类 CountableItems 扩展组件 {onDenomChange = (value, denom) =>{this.props.dispatch(actions.increaseSum(value, denom));控制台日志(值)；}使成为() {让 denomGroups = this.props.denoms.map((denom, i) => {返回 (Object.keys(denom).map((key) => {让 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>)}));});返回 (<div className="countable-item-wrapper"><div className="row">{denomGroups});}}函数 mapStateToProps(state, ownProps) {返回 {denoms: state.count.denomGroups,}}导出默认连接(mapStateToProps)(CountableItems)；
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;
解决方案
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);
这篇关于在 React 中将函数传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
