Question

假设我们有一个父组件，可能有很多类型的子组件。

例如：

class App extends React.Component<{}, {}> {
    render() {
        return (
            <div>
                <parent>
                    <child-1/>
                </parent>
                <parent>
                    <child-2/>
                </parent>
            </div>
        );
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

只应根据拖动事件呈现父级，但是它的x，y，宽度，高度应根据其特定的子尺寸进行渲染。

有没有办法从孩子那里获取这些信息？或者引用一个孩子？

谢谢你！

Answer 1

如果我理解你，那么你可以将更新功能传递给孩子，当事件发生时他们将更新父母：

class Parent extends React.Component<{}, {}> {
    render() {
        return (    
            <div className="parent">
                <Child updatePosition={ this.onChildPositionUpdated.bind(this) } />
            </div>
        );
    }

    onChildPositionUpdated(x: number, y: number, width: number, height: number) {
        // calculate things
    }
}

interface ChildProps {
    updatePosition(x: number, y: number, width: number, height: number);
}

class Child extends React.Component<ChildProps, {}> {
    onDrag(...) {
        // get dimensions
        this.props.updatePosition(...);
    }

    render() {
        return // ...
    }
}

class App extends React.Component<{}, {}> {
    render() {
        return (
            <div>
                <Parent />
            </div>
        );
    }
};

另一种选择是使用Refs to Components：

class App extends React.Component<{}, {}> {
    childs = [];

    render() {
        return (
            <div>
                <parent>
                    <child-1 ref={ (c) => this.childs.push(c) } />
                </parent>
                <parent>
                    <child-2 ref={ (c) => this.childs.push(c) } />
                </parent>
            </div>
        );
    }
};

现在，阵列中的孩子们可以随心所欲地完成任务。

反应 - 未知孩子与父母之间的沟通

1 个答案: