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

Question

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。

Answer 1

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

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

Redux Actions

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

包含在您的 mapDispatchToProps 中

一旦您执行了操作，您的 connect 包装您的主要组件的高阶组件 (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 Reducers

所以这将要移动的方式是你正在运行，某处将调用该操作。一旦动作被调用，它就会触发减速器并对你需要的商店进行任何更改。一旦 reducer 用新值更新了 store，它就会更新任何通过 connect HOC connected 到它的组件，这将导致它们 re-render 使用新信息.

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

希望对您有所帮助。

Answer 2

我找到了答案：

我仍然可以在 redux 中作为 props 传递，但我不能这样做：OtherComponent = ({executeFunctionInMainComponent}) => {}。我需要这样做： OtherComponent = (props) => {} 然后在该组件内我可以通过 props.executeFunctionInMainComponent

进行访问

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

React, Redux - pass function from component A to other components

reactjs

react-redux

react-hooks