Реагировать вызов компонента компонента из класса - PullRequest
Новая
       15

Реагировать вызов компонента компонента из класса

0 голосов
/ 13 марта 2020

Я использую React с TypeScript,

У меня есть компонент с именем 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;

Я хочу вызвать этот метод changeDataSource компонента, из любой внешний класс TypeScript. Это возможно?

1 Ответ

0 голосов
/ 13 марта 2020

Вы должны предоставить ссылку на эту функцию через реквизиты для детей или через контекст. 

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>
    )
  }
}
...