在 React 中将函数传递给子组件

IT技术 reactjs redux
2021-04-28 00:41:39

我正在尝试将一个函数传递给 React 中的子组件。如果我将该函数放在我有权访问的 ES6 类中this.props.dispatch，但在该类中无权访问mapStateToProps

相反，当我在 ES6 类之外定义函数时，我似乎可以访问该函数，但不能 this.props.dispatch

有人可以确定我做错了什么，既可以访问又this.props.dispatch可以在mapStateToProps函数中使用该函数

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

这是呈现的组件 <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>
    );
  }
}

导出默认计数；

1个回答

您想传递对CountableItems实例onDenomChange属性的引用。您可以通过引用this.onDenomChangelike来做到这一点onDenomChange={this.onDenomChange}。

重要提示：您需要使用箭头功能() => {}，以便为this引用CountableItems您的嵌套的循环中的实例。常规函数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 {
  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 - 外部元素的样式 下一篇React hooks 使用计时器管理 API 调用