javascript - 如何调用其他组件中定义的方法

Question

假设我们有两个功能组件App和Product。从 Product 组件中，您只需将方法作为 props 传递即可轻松调用父组件 (App) 中定义的方法 (methodA={methodA})。有人可以告诉我如何从 Product 组件调用 Cart 组件中定义的方法吗？

//App.js
import React from "react";

import Cart from "./Cart";
import Order from "./Order";
import Product from "./Product";

const App = props => {

  const { order } = props;

  const methodA = props => {
    console.log(methodA);
  }

  return (
    <div className="container">
      <Cart>
        {order.map((products, i) => {
          return (
            <Order key={i}>
              {products.map((items, i) => (
                <Product item={items} key={i} methodA={methodA} />
              ))}
            </Order>
          );
        })}
      </Cart>
    </div>
  );
};
export default App; 

//Product.js
import React from 'react';

const Product = props => {

    return <div className="delete" onClick={props.methodA}></div>;
};
export default Product;

Answer 1

这就是为什么 Redux 是为了更轻松的状态管理而开发的。您应该在此存储内调度 Redux 存储和操作。设置完 redux 存储和操作后，您可以轻松地从多个组件分派(dispatch)相同的操作。