javascript - 我可以绕过 child 去带孙子去做 parent 吗？ ReactJS

我想知道是否有可能在孙子中触发一个事件并在整个父级中触发某些事情，而不必经过中间继子。

我创建了一个简单的示例，该示例将只是console.log

所以我想去孙=>父母（火事件），而不是去孙=>子=>父母（火事件）

如果以简单的方式（例如上链）无法做到这一点，请告诉我。

父母

export default class Parent extends React.Component {
  render() {
    return (
      <div>
        Parent
        <Child clickMe={this.fireEvent.bind(this)}/>
      </div>
    )
  }

  fireEvent() {
    console.log("Parent")
  }
}

儿童

export default class Child extends React.Component {
  render() {
    return(
      <div>
        child
        <Grandchild fireEvent={this.handleClick.bind(this)}/>
      </div>
    )

  }

  handleClick() {
    console.log('Child')
    this.props.clickMe();
  }
}

孙子

export default class Grandchild extends React.Component {
  render() {
    return(
      <div>
        grandchild
        <button onClick={this.handleClick.bind(this)}>GC Click</button>
      </div>
    )
  }

  handleClick() {
    console.log('Grandchild')
    this.props.fireEvent();
  }
}

最佳答案

要与不是直接子代的组件进行交互，可以使用redux或context。上下文是实验性的API，如果您别无选择，则应使用上下文。

这是一个例子：

import * as React from 'react';
import User from './User';
import PropTypes from 'prop-types';

class Small extends React.Component {

    static contextTypes = {
        color: PropTypes.string.isRequired,
        user: PropTypes.object.isRequired
    };

    render() {
        return <div style={{backgroundColor: this.context.color, height: '125px', width: '33%'}}>
            Small, user = {this.context.user.id}-{this.context.user.login}
        </div>;
    }
}

class Medium extends React.Component {
    render() {
        return <div style={{backgroundColor: 'red', height: '250px', width: '50%'}}>
            Medium
            <Small/>
        </div>;
    }
}

export default class Large extends React.Component {

    static childContextTypes = {
        color: PropTypes.string.isRequired,
        user: PropTypes.object.isRequired
    };

    getChildContext() {
        return {color: 'purple', user: new User(1, 'admin')};
    }

    render() {
        return <div style={{backgroundColor: 'blue', color: 'white', height: '300px', width: '75%'}}>
            Large
            <Medium/>
        </div>;
    }
}

关于javascript - 我可以绕过 child 去带孙子去做 parent 吗？ ReactJS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48382508/