Question

所以我想做的是监听下级子组件上的任何活动或更改。我们所拥有的是：在主App.js中加载ClinicalTrials.js，在ClinicalTrials.js内部，我们仅加载一个 hook ，它返回一些标记和功能。

代码的外观如下：

App.js组件：

class App extends Component {

    render() {
        return (
            <Router>
                <div className="App">
                    <Navigation />
                    <section className="primary-content-area h-100">
                        <Route exact path="/" component={Home} />
                        <Route path="/clinical-trials" component={ClinicalTrials} />
                    </section>
                    <Footer />
                </div>
            </Router>
        )
    }
}

ClinicalTrials组件：

function ClinicalTrials() {
    return (
        <SlideControl />
    )
}

最后但并非最不重要的 hook 标记：

const slideControl = () => {
    const TagName = state.slides[state.currentSlide]

    return (
        typeof TagName == 'function' ? (
            <div>
                <TagName />
            </div>
        ) : (
                null
            )
    )
}

这个想法是，实际上 hook 中返回的 markup 是动态的，因此<TagName />是使用const TagName生成的， const TagName使用在状态中传递的任何内容。

所以最终您会得到类似'，'等的信息。

我的问题是，<TagName />发生更改时，我想运行一个函数，但我不确定到底什么是最佳方法。

我尝试了经典的componentWillUpdate()等，但是当您有一个孩子的孩子更改为App.js本身时，似乎没有任何作用。

所以，尽管如此，我必须更改App.js，我该怎么做？设置另一个状态，创建一个函数，然后将其传递给所述 child 并添加一个onChange事件，该事件将在我们看到更改为 child 时触发

但是我真的不确定这样做是否是推荐的方法，因此经过一些研究并且不知道我是否也会问我的其他开发人员：）

监视子组件内部的变化

0 个答案: