React跨组件调用类组件方法 Navbar按钮失效问题

按钮移到Navbar后失效是三个明确的代码问题叠加导致的：

• 第一，prop名大小写拼写错误：Navbar里给「Generate New Array」按钮传的回调prop是handleclick（首字母c小写），但Button组件内部绑定点击事件时读取的是this.props.handleClick（首字母C大写）。React对props的大小写敏感，这个回调根本没被Button组件识别，点击自然不会触发任何逻辑。
• 第二，兄弟组件通信断裂：resetArray和所有排序方法都是定义在Visualizer组件内部的实例方法，Navbar和Visualizer是同级兄弟组件，React单向数据流规则下，Navbar无法直接访问Visualizer内部的方法；同时你在Navbar里写this.props.resetArray()时，App组件渲染Navbar根本没传入这个prop，实际拿到的值是undefined，调用会直接抛错。
• 第三，方法作用域不匹配：Navbar里其余几个排序按钮直接调用this.mergeSort()、this.quickSort()这类方法，但这些方法全定义在Visualizer组件上，Navbar自身实例上根本不存在对应方法，点击就会报「函数未定义」错误。

核心逻辑是把数组状态、重置数组、排序相关的方法全部提升到两个组件的共同父组件App做统一管理，再通过props把触发方法传给Navbar，把待渲染的数组数据传给Visualizer，同时修正所有prop的拼写错误。 #

第一步：修改App.js，完成状态提升 #

把原Visualizer里的状态、业务逻辑移到App组件，分别向子组件传参：

import React from "react";
import "./App.css";
import Visualizer from "./Visualizer/Visualizer";
import Navbar from "./components/Navbar";
import Info from "./components/Info";

// 原响应式配置保留在组件外部即可
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
let animationSpeed = 1;
if (screenWidth < 700) {
  animationSpeed = 3;
}
// 随机数工具函数可移到这里或单独抽离为公共方法
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.animationSpeed = animationSpeed;
    this.numberOfBars = screenWidth / 10;
    this.primaryColor = "orange";
    this.secondaryColor = "white";
    this.barHeight = screenHeight - 500;

    this.state = {
      array: []
    }
    // 统一绑定方法this指向，避免回调丢失this
    this.resetArray = this.resetArray.bind(this)
    this.mergeSort = this.mergeSort.bind(this)
    this.quickSort = this.quickSort.bind(this)
    this.insertionSort = this.insertionSort.bind(this)
    this.bubbleSort = this.bubbleSort.bind(this)
  }

  componentDidMount(){
    // 页面首次加载时初始化数组
    this.resetArray();
  }

  resetArray() {
    const array = [];
    for (let i = 0; i < this.numberOfBars; i++) {
      array.push(getRandomNumber(5, this.barHeight));
    }
    this.setState({ array });
  }

  // 以下几个排序方法直接复用你原Visualizer里写好的逻辑即可，不需要改动
  mergeSort() {
    // 原归并排序实现
  }
  quickSort() {
    // 原快速排序实现
  }
  insertionSort() {
    // 原插入排序实现
  }
  bubbleSort() {
    // 原冒泡排序实现
  }

  render() {
    return (
      <div className="App">
        <Navbar 
          resetArray={this.resetArray}
          mergeSort={this.mergeSort}
          quickSort={this.quickSort}
          insertionSort={this.insertionSort}
          bubbleSort={this.bubbleSort}
        />
        <Visualizer array={this.state.array} />
        <Info />
      </div>
    );
  }
}

第二步：修改Navbar.js，修正拼写与调用逻辑 #

统一按钮回调的prop名为handleClick，所有触发方法从props中读取，不要调用组件自身不存在的方法：

import React from "react"
import icon from "./images/sort.png"
import Button from "./Button"

export default class Navbar extends React.Component {
    render() {
        return (
            <nav className="nav--bar">
                <h1 className="nav--text">
                  <img src={icon} className="nav--icon" />Sorting Algorithm Visualizer
                </h1>
                <div className="nav--buttons">
                    <Button 
                        name="Generate New Array"   
                        handleClick={() => this.props.resetArray()}
                    />
                    <Button 
                        name="Merge Sort"
                        handleClick={() => this.props.mergeSort()}
                    />
                    <Button 
                        name="Quick Sort"
                        handleClick={() => this.props.quickSort()}
                    />
                    <Button 
                        name="Insertion Sort"
                        handleClick={() => this.props.insertionSort()}
                    />
                    <Button 
                        name="Bubble Sort"
                        handleClick={() => this.props.bubbleSort()}
                    />                        
                </div>
            </nav>
        )
    }   
}

第三步：简化Visualizer.js，仅保留渲染逻辑 #

删掉组件内部冗余的状态、业务方法、底部重复按钮，只接收父组件传入的数组数据完成柱状图渲染：

import React from "react"
import "./Visualizer.css";

export default class Visualizer extends React.Component {
    render() {
        const { array } = this.props;
        return (
            <div className="array--container">
                {array.map((value, index) => (
                    <div className="array--bar" key={index} style={{ height: `${value}px` }}></div>
                ))}
            </div>
        );
    }
}

补充说明 #

Button组件本身逻辑没有问题，只要保证传入的回调prop名是和组件内部读取的handleClick完全一致（大小写完全匹配），就能正常触发点击，不需要额外修改。

运行效果参考：排序算法可视化器运行截图

内容的提问来源于stack exchange，提问作者DudeAwesome