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 HOCconnected 到它的任何组件，这将导致它们使用新信息重新渲染。

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

我希望这会有所帮助。

Answer 2

我找到了答案：

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