道具钻孔功能

Question

我想从第三个组件开始调用App.js中的onChangeStep（）函数

执行此操作的更好方法是什么？ 现在，我正在尝试使用道具将其完全向下钻取，并且仍然可以正常使用。

App.js-> Comp2-> Comp3-> onChangeStep

主要组件

  import React, { Component } from "react";

    export default class App extends Component {
      state = {
        var: ""
      };

      onChangeStep() {
        this.setState({ var: "changed" });
      }
      render() {
        return (
          <div>
            <Comp2 onChangeStep={this.onChangeStep.bind(this)} />
          </div>
        );
      }
    }

Comp2

    <Comp3
      onChangeStep={this.props.onChangeStep}
    />

Comp3

import React from "react";

function handleClick(e, props) {
  this.props.onChangeStep();

}

const Comp3 = props => {
  return (
    <div className="column">
      <img
        onClick={e => handleClick(e, "src")}
        alt=""
        src="/cars"
        className="ui image"
      />
    </div>
  );
};

export default Comp3;

Answer 1

由于您的Comp3是函数，因此“ props”对象仅在const Comp3范围内可用。 一个快速的解决方法是将Comp3变成一个类组件，如下所示：

import React, { Component } from "react";

class Comp3 extends Component {

  handleClick = (e, props) => {
    this.props.onChangeStep();
  }

  render() {
    return (
      <div className="column">

      <img
        onClick={e => this.handleClick(e, "src")}
        alt=""
        src=""
        className="ui image"
      />
    </div>
    );
  }
}


export default Comp3;

为避免道具通过一长串组件传递，您应该阅读React.Context

Answer 2

这还不错，并且在许多React代码库中很常见。不过，我会同意，这还不是很完美。

除了您正在做的事情之外，我目前唯一想到的其他方法是使用上下文。

const OnChangeStepContext = React.createContext(undefined)

class Parent extends React.Component {
    onChangeStep() {
        ...
    }

    render() {
        return (
            <OnChangeStepContext.Provider value={this.onChangeStep.bind(this)}>
                ...
            </OnChangeStepContext.Provider>
        )
    }
}

function ChildOne() {
    ...
}

function ChildTwo() {
    const onChangeStep = useContext(OnChangeStepContext)

    return (
        <img onClick{onChangeStep} ... />
    )
}