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很容易，只需像上面的示例中那样作为道具传递即可。我有包含操作，组件，容器和化简器的文件夹。

现在我有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有误解。这不允许在组件中创建的功能在不同位置重复使用。这是为了将该逻辑移到函数之外的化简器上，从而可以在通过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并对所需的商店进行任何更改。 Reducer用新值更新商店后，它将通过连接HOC更新与 connect 连接的所有组件，这将使它们重新呈现新信息。

也是我最喜欢的图像，用来描述redux的工作原理。

我希望这会有所帮助。

Answer 2

我找到了答案：

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

进行访问

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

2 个答案: