Question

目前正在创建一个TypeScript / React应用，但我遇到了一个问题。我想要做的是将一个组件作为属性存储在另一个组件中，这样我就可以直接访问它的方法和属性（因为我需要了解它的子级方法）。基本上我想做的是这样的事情：

class FooContainer extends React.component<FooContainerProps,FooContainerState> {
    bar: Bar;

    constructor(props: FooContainerProps) {
        super(props);
        this.bar = new Barcontainer({bar_prop1: asdf, ...});
    }
    aThing() {
        this.bar.doSomething();
    }

    render() {
        return <Foo bar={this.bar} />;
    }
}

class Foo extends React.component<FooProps,undefined> {
    render() {
        return ( ... {this.props.bar} ...);
    }
}

class BarContainer extends React.component<BarContainerProps,BarcontainerState>{
    doSomething() {
    }
    render() {
        return <div>...</div>;
}

每当我设置foo的状态时，我也需要bar来更新，因为bar的道具依赖于foo的状态。有什么想法吗？

编辑：非常感谢您的帮助。使用给出的内容，我找到了一种方法来使组件不具有任何对象属性，因此它现在看起来像这样：

class FooContainer extends React.component<FooContainerProps,FooContainerState> {
    bar: Bar;

    registerBar(bar: Bar) {
        this.bar = Bar;
    }

    aThing() {
        this.bar.doSomething();
    }

    render() {
        return <Foo
            registerBar={this.registerBar.bind(this)}
            bar={this.bar} />;
    }
}

class Foo extends React.component<FooProps,undefined> {
    render() {
        return ( 
            ... 
            <Bar ref={(el) => {this.props.registerBar(el)}} />
            ...
        );
    }
}

class BarContainer extends React.component<BarContainerProps,BarcontainerState>{
    doSomething() {
    }

    render() {
        return <div>...</div>;
}

再次感谢您的帮助！

Answer 1

这是“反应方式”：

class Foo extends React.Component<{}, {}> {
    private bar: Bar;

    render() {
        return <div><Bar ref={ el => this.bar = el } /></div>
    }
}

class Bar extends React.Component<{}, {}> {
    render() {
        ...
    }
}

有关参考的更多内容：Refs and the DOM

使组件成为属性，以便我可以访问其方法

1 个答案: