时间戳

首页 > 解决方案 > 从另一个反应组件调用反应组件内的方法

reactjs - 从另一个反应组件调用反应组件内的方法

问题描述

我对 ReactJS 还很陌生，遇到了一个我有 2 个组件的问题，我将它们称为 comp1 和 comp2。Comp1 渲染 comp2 并且 comp2 里面有一个方法。

如果在 comp1 中单击一个按钮，它会调用 comp1 内的单击处理程序，我希望它调用 comp2 内的方法，但我不断收到错误this.comp1.myFunc is not a function

下面是代码。

在 comp1

class Comp1 extends React.Component
{
    testClick()
    {
        this.comp2Comp.myFunc();
    }

render() {
        const postCommentDisabledState = this.state.newComment.length === 0;

        this.comp2Comp = <Comp2 />

        return (
            <div>
                <button onClick={this.testClick}>Test</button>
                {this.comp2Comp}
            </div>
        )
    }
}

在 comp2

class Comp2 extends React.Component
{
    myFunc()
    {
        alert("Testing MyFunc");
    }

    render()
    {
         return (
            <div>comp2</div>
         )
    }
}

我正在尝试做的事情是否可能，如果不是，我将如何做我想要实现的目标？

最终结果是，comp2 在其状态中有一些东西，当在 comp1 中按下按钮时，我可以从 comp2 内部获取我需要的数据以供 comp1 使用。

标签： reactjs

解决方案

由于 Comp2 是一个子组件，您应该将其状态移动myFunc到 Comp1。通常在 React 中，您希望使用单向数据绑定，因此所有状态都应该“提升”到父上下文。见：https ://reactjs.org/docs/lifting-state-up.html

另外，请注意，您的渲染函数不应有任何副作用，例如在组件上设置属性。请参阅：https ://reactjs.org/docs/react-component.html#render

推荐阅读