如何在另一个组件中运行 React 函数答案

【问题标题】：How to run React function within another component如何在另一个组件中运行 React 函数
【发布时间】：2020-03-20 13:10:28
【问题描述】：

我有两个组件。他们都渲染得很好。组件一在组件二内部。盒子里面的一个按钮。

当我点击按钮时，我想提醒（'hello'），但没有成功......但是，如果我在 Main 类中单独插入按钮组件，它可以工作......

组件一：

class Button extends Component {
  sayHello() {
    alert("hello!");
  }

  render() {
    return (
      <div>
        <button onClick={() => this.sayHello()}>PRESS</button>
      </div>
    );
  }
}

export default Button;

组件二：

class Box extends Component {
  render() {
    return (
      <div>
        <h1>I just want say...</h1>
        <Button />
      </div>
    );
  }
}

export default Box;

index.js：

class Main extends React.Component {
  render() {
    return (
      <div>
        <Box />
      </div>
    );
  }
}

ReactDOM.render(<Main />, document.getElementById("root"));

【问题讨论】：

检查控制台是否有任何错误..
这应该没有任何问题，检查控制台是否有错误？
控制台没有错误，只是一个 webpack 消息：等待来自 WDS 的更新信号...
它只有在我将组件单独放置时才有效，而不是作为盒子组件中的子组件...

标签： javascript reactjs

【解决方案1】：

我的 CSS 样式更改了 z-index，使按钮无法点击。将绝对位置更改为相对位置，现在可以正常工作了。

【讨论】：