React 从类中调用组件方法答案

【问题标题】：React call a component method from classReact 从类中调用组件方法
【发布时间】：2020-03-13 11:38:43
【问题描述】：

我正在使用带有 TypeScript 的 React，

我有一个名为 D3EngineTemp.tsx 的组件，如下所示。

import * as tree from './d3';
import React from "react";
import { UIHandler } from '../service/UIHandler';
const _UIHandler: UIHandler = new UIHandler();
class D3EngineTemp extends React.Component{
    state = {
        loading: true,
        data: {}
    }

    changeDataSource(source:any){
        this.setState({data: source, loading: false});
        console.log(source);
        this.forceUpdate();
    }

    componentDidMount(){
        var _data = _UIHandler.getData();
        this.setState({data: _data, loading: false});
        console.log(_data);
    }

    render(){
        if (this.state.loading) {
            return <div>loading...</div>;
        }
        tree.draw(this.state.data)
        return(
            <div></div>
        );
    }
}
export default D3EngineTemp;

我想从任何外部 TypeScript 类调用组件的 changeDataSource 方法。这可能吗？

【问题讨论】：

据我所知，您可以通过将函数作为 prop 传递来在此类的子类中调用此函数

标签： reactjs typescript react-typescript

【解决方案1】：

您应该通过子属性或上下文提供指向此功能的链接。

class Parent extends React.Component {
constructor(props: any) {
    super(props);
    this.changeDataSource = this.changeDataSource.bind(this);
}
state = { value: 'old' }

forceUpdate() {
    console.log('forceUpdate');
}

changeDataSource() {
    this.setState({ value: 'updated' });
    this.forceUpdate();
}

render() {
    return (
        <div>
            <h1>Parent</h1>
            <p>{this.state.value}</p>
            <Child func={this.changeDataSource} />
        </div>
    )
  }
}

在 Child.tsx 中：

type Function = (source: any) => void;

type ChildProps = {
  func: Function
}


const Child = ({ func }: ChildProps) => {
  return (
    <div>
        <h2>Child</h2>
        <button onClick={func}>Child Button</button>
    </div>
  )
}

加上上下文，它会是这样的：

const Context = React.createContext<(() => void) | undefined>(undefined);

const Child = () => {
  const func = React.useContext(Context);

  return (
    <div>
        <h2>Child</h2>
        <button onClick={func}>Child Button</button>
    </div>
  )
}

class Parent extends React.Component {
  constructor(props: any) {
    super(props);
    this.changeDataSource = this.changeDataSource.bind(this);
  }
  state = { value: 'old' }

  forceUpdate() {
    console.log('forceUpdate');
  }

  changeDataSource() {
    this.setState({ value: 'updated' });
    this.forceUpdate();
  }

  render() {
    return (
        <Context.Provider value={this.changeDataSource}>
            <div>
                <h1>Parent</h1>
                <p>{this.state.value}</p>
                {/* deeep in tree */}
                <Child />
            </div>
        </Context.Provider>
    )
  }
}

【讨论】：