reactjs - React，Redux - 将功能从组件 A 传递给其他组件

问题描述

import React from "react";
import OtherComponent from "./OtherComponent";

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.runMyFunction = this.runMyFunction.bind(this);
    this.myFunction = this.myFunction.bind(this);
  }

  runMyFunction(event) {
    event.preventDefault();
    this.myFunction();
  }

  myFunction() {
    return console.log("I was executed in Main.js");
  }

  render() {
    return (
      <div>
        <OtherComponent runMyFunction={this.runMyFunction} />
      </div>
    );
  }
}
export default Main;

import React from "react";

class OtherComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.props.runMyFunction();
  }

  render() {
    return (
      <div>
       <button onClick={this.handleClick} />Click me to execute function from Main </button>
      </div>
    );
  }
}

export default OtherComponent;

我是 redux 的新手，不知道如何在其他组件中传递和运行该功能。不使用 redux 很容易，只需像上面的示例一样作为 props 传递。我有包含操作、组件、容器和减速器的文件夹。

现在我有我有的Main.js地方

import React from "react";
const Main = ({data, getData}) => {
  const myFunction = () => {
    return "ok";
  };
  return (
    <div>
      <p>This is main component</p>
    </div>
  );
};
export default Main;

在MainContainer.js我得到：

import Main from "../../components/Main/Main";
import { connect } from "react-redux";
import {
  getData
} from "../../actions";

function mapStateToProps(state) {
  return {
    data: state.main.data
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    getData: () => dispatch(getData())
  };
};

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

那么我如何在 OtherComponent.js 中运行函数 myFunction()：

import React from "react";
const OtherComponent = ({executeFunctionInMainComponent}) => {
  return (
    <div>
      <button onClick={executeFunctionInMainComponent}>run action</button>
    </div>
  );
};
export default OtherComponent;

我只需要运行，而不是传递整个函数，只需在 Main.js 中执行 myFunction，但运行此函数的操作将来自 OtherComponent。

标签： reactjsreact-reduxreact-hooks

解决方案

所以首先我不得不提一下，我相信你对 redux 有误解。这并不是为了允许在组件中创建的函数在不同的位置重复使用。这是将该逻辑移动到函数外部的 reducer，这将允许在任何你使用 react-redux 的 {connect} 连接它的地方使用它。所以你需要几个文件（为了清楚起见）。首先，您需要一个操作文件，我们将其命名为 myReturnOkAction。

export const myReturnOkAction = (/*optional payload*/) => {
  return {
    type: 'PRINT_OK',
  }
}

Redux 操作

这就是您要在 mapDispatchToProps 函数中调用的内容，您将在其中触发此事件。您将不得不将其导入到您的 OtherComponent 中，import {myReturnOkAction} from "/*wherever the files exists*/"并将其包含在您的 mapDispatchToProps 中okFunction: () => dispatch(myReturnOkAction())

一旦你有你的行动，你的连接高阶组件（HOC）包装你的主要组件将需要一个 Reducer 来修改你当前的存储状态以及执行任何操作。

export const myReturnOkReducer = (state, action) => {
  if(action.type === 'PRINT_OK'){
    /*This is where you update your global state*/
    /*i.e. return {...store, valueWanted: ok}*/
  }else{
    return state
  }
}

Redux 减速器

所以这将要移动的方式是你的功能，某处将调用动作。一旦调用了该操作，它将触发减速器并对您需要的存储进行任何更改。一旦 reducer 用新值更新了 store，它就会更新通过 connect HOC 连接到它的任何组件，这将导致它们使用新信息重新渲染。

也是我最喜欢的描述 redux 工作原理的图片。

我希望这有帮助。

reactjs - React，Redux - 将功能从组件 A 传递给其他组件

问题描述

解决方案

推荐阅读