将子 class 方法传递给父功能组件

Question

我正在尝试从Component1获取adaptValue并在Component2中使用它。 由于某种原因，这不起作用，因为我的adaptValue始终为空/未定义。 是因为Parent是一个功能组件吗？

const Parent = (props) => {
    const [adaptValue, setAdapt] = useState(null);
    return (
        <div>
            <Component1 setAdapt={setAdapt}/>
            <Component2 adaptValue={adaptValue}/>
        </div>
    )
}

export default class Component1 extends Component {
    constructor(props) {
      super(props);
    }
  
    adaptValue = (value) =>{
        DO_SOMETHING_WITH_VALUE
    }

    componentDidMount() {
        this.props.setAdapt(this.adaptValue);
    }

    render() {
        return something;
    }
}

export default class Component2 extends Component {
    constructor(props) {
      super(props);
    }
  
    someFunction = (value) =>{
        ...
        //adaptValue is always undefined
        this.props.adaptValue(value)
        ...
    }

    render() {
        return something;
    }
}

更新最终使父组件成为 class 组件并且一切正常。 想知道这是否是功能组件或基于类的组件之间的兼容性问题。

Answer 1

当将setAdapt传递给Component1 ... setAdapt已经是 function。 无需将其包裹在另一个中。 Component1将修改该值，而Component2将显示它。 Function 组件与行为无关。

尝试...

应用程序.js

import React, { useState } from "react";
import "./styles.css";
import Component1 from "./Component1";
import Component2 from "./Component2";

export default function App() {
  const [adaptValue, setAdapt] = useState(null);

  return (
    <div>
      <Component1 setAdapt={setAdapt} />
      <Component2 adaptValue={adaptValue} />
    </div>
  );
}

组件1.js

import React, { Component } from "react";

export default class Component1 extends Component {
  handleClick = () => {
    this.props.setAdapt("New Value");
  };

  render() {
    return <button onClick={() => this.handleClick()}>Set Value</button>;
  }
}

组件2.js

import React, { Component } from "react";

export default class Component2 extends Component {
  render() {
    return !!this.props.adaptValue ? (
      <h1>{`"${this.props.adaptValue}" <- Value of adaptValue`}</h1>
    ) : (
      <h1>adaptValue Not Assigned</h1>
    );
  }
}

沙盒示例...