Reactjs 如何从另一个组件触发函数'；s onclick事件

所以我是ReactJS的新手，如果我正确解决他们的测试项目，有一家很酷的公司会提供初级react开发人员职位。在这个项目中，我必须绘制四个svg组件并处理一些简单的事件，其中只有一个用户交互，即按钮单击事件。所以每件事看起来都很简单，但关键是，我在项目的中间。p> 我想通过按钮组件中的单击事件为其中一个组件提供一个抖动动画。当按钮被点击时，树会摇晃3秒钟，之后会触发另一个动作。我准备了一个css动画，我想在每次单击按钮组件时更改树组件的类。无法找到如何执行此操作

这是我的按钮组件

class ShakeButton extends React.Component {
    this.props.onClick(this.props.activeClass==='shake')

    render() {
        return (
            <g id="shakeButton" transform="scale(0.15,0.15), translate(3000,-1000)"  onClick={this.handleClick}>
                //a good amount of svg content here
            </g>
        )
    }
}

export default ShakeButton

类ShakeButton扩展React.Component{
this.props.onClick（this.props.activeClass==='shake'）
render（）{
返回(
//这里有大量的svg内容
)
}
}
导出默认按钮

这里是我的树组件（它将更改css动画的类名）

import React，{Components}来自“React”；
导入“/cssTree.css”；
类AppleTree扩展了React.Component{
//状态={
//活动类：“”
//}n
//handleClick=（）=>this.props.onClick（this.props.activeClass==='shake'）
render（）{
返回(
//同样，这里有一些拥挤的svg内容
)
}
}
导出默认AppleTree

我将所有组件收集到名为

的组件中，并将其呈现在App.js中。您可以尝试提起，意思是将其放入父组件（

App

），然后将其传递给子组件

class App extends React.Component{  
  constructor(props) {
    super(props);
    this.state({
      className: ''
    });
  }
  handleClick = () => {
    this.setState({ className: 'shake' });
  }

  render (
    return (
    // all your components
    <Button clickHandler={this.handleClick} />
    <AppleTree class={this.state.className} />
    )
  )
}

// Button component: Stateless if it doesn't need it's own state
const Button = ({ clickHandler }) => {
 return (
   <g id="shakeButton" transform="scale(0.15,0.15), translate(3000,-1000)"  onClick={() => clickHandler()}>
   //a good amount of svg content here
   </g>
 )
}

// Stateless if it doesn't need its own state
const AppleTree = ({ class }) => {
    return (
      <g className={class} id="appleTree" >
        <g transform="translate(-1000 -1300) scale(1.5)">
         //again, some crowded svg content here
        </g>
      </g>
    )
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州({
类名：“”
});
}
handleClick=（）=>{
this.setState（{className:'shake'}）；
}
渲染(
返回(
//所有组件
)
)
}
//按钮组件：无状态，如果它不需要自己的状态
常量按钮=（{clickHandler}）=>{
返回(
clickHandler（）}>
//这里有大量的svg内容
)
}
//无状态，如果它不需要自己的状态
常量AppleTree=（{class}）=>{
返回(
//同样，这里有一些拥挤的svg内容
)
}

您可以尝试提起，意思是将其放入父组件（

App

我想），然后将其传递给子组件

class App extends React.Component{  
  constructor(props) {
    super(props);
    this.state({
      className: ''
    });
  }
  handleClick = () => {
    this.setState({ className: 'shake' });
  }

  render (
    return (
    // all your components
    <Button clickHandler={this.handleClick} />
    <AppleTree class={this.state.className} />
    )
  )
}

// Button component: Stateless if it doesn't need it's own state
const Button = ({ clickHandler }) => {
 return (
   <g id="shakeButton" transform="scale(0.15,0.15), translate(3000,-1000)"  onClick={() => clickHandler()}>
   //a good amount of svg content here
   </g>
 )
}

// Stateless if it doesn't need its own state
const AppleTree = ({ class }) => {
    return (
      <g className={class} id="appleTree" >
        <g transform="translate(-1000 -1300) scale(1.5)">
         //again, some crowded svg content here
        </g>
      </g>
    )
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州({
类名：“”
});
}
handleClick=（）=>{
this.setState（{className:'shake'}）；
}
渲染(
返回(
//所有组件
)
)
}
//按钮组件：无状态，如果它不需要自己的状态
常量按钮=（{clickHandler}）=>{
返回(
clickHandler（）}>
//这里有大量的svg内容
)
}
//无状态，如果它不需要自己的状态
常量AppleTree=（{class}）=>{
返回(
//同样，这里有一些拥挤的svg内容
)
}