Shai Kimchi Shai Kimchi - 1 year ago 74
React JSX Question

check if a component is a child or ancestor of another component ReactJS

I am creating a ReactJS Component with an unknown number of children and ancestors, and when a certain event occurs on one of the ancestors I the parent component should know of it. my first approach is to use redux and send the child component with a redux action, and then main parent componetnts will be alerted and will check if the Componetnt sent was one of its ancestors.
but, can a parent reactJS component know in someway if another component is one of its ancestors?

igl igl
Answer Source

The parent can define a function in the context, Children can then call this function:


childContextTypes: {
    notifyChange: React.PropTypes.func.isRequired

getChildContext () {
    return {
        notifyChange: (...args) => this.handleChange(...args)

handleChange (arg) {
    console.log(arg + ' bar!')


contextTypes: {
    notifyChange: React.PropTypes.func

handleSomething () {
    const { notifyChange } = this.context

    // safety check if component is used elsewhere
    if (notifyChange) notifyChange('foo!')
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download