React中调用Flippy.toggle报Cannot read property错误如何解决

• 作用域错位：绑定到按钮的点击回调是定义在父组件ListaMaterii中的，回调执行时的this指向父组件实例，但存储Flippy实例的this.flippy是写在SubjectCard组件内部的子组件实例属性，父组件实例上根本不存在这个属性，读取值为undefined，调用toggle方法就会触发类型错误。
• 不规范命名：直接使用function作为props名，属于接近JS保留字的敏感命名，容易引发props传递的边界兼容问题，不符合React组件的props命名规范。
• 语法错误：BackSide下的Button标签后多了一个多余的}，会触发编译解析异常，导致运行时非预期问题。

• 实现组件内部逻辑闭环：Flippy的ref是SubjectCard的内部属性，翻页交互完全可以由SubjectCard自行处理，不需要把内部ref的操作逻辑通过props暴露给父组件，从根源上避免跨组件访问内部属性的问题。
• 规范props命名：将原名为function的prop替换为语义化、无敏感冲突的命名，比如onCardAction，避免潜在兼容问题。
• 清理代码中的多余语法符号，保证编译流程正常运行。
• 逻辑解耦：在SubjectCard内部完成翻页操作后，再调用父组件传入的自定义方法，既保留子组件的通用性，又能让父组件按需传入自身的业务逻辑。

调整后的SubjectCard组件 #

render() {
  return (
    <div className="Subject-div">
      <div id="subjects">
        <Flippy
          flipOnHover={false} 
          flipOnClick={false} 
          flipDirection="horizontal" 
          ref={(r) => (this.flippy = r)} 
          style={{ width: "inherit", height: "inherit" }}
        >
          <FrontSide id="subject-card-front-side">
            <img
              id="subject-card-front-image"
              src={this.props.image}
              alt={this.props.alt}
            />
            <div id="subject-card-front-div">
              <Button
                variant="contained"
                id="subject-card-front-button"
                onClick={() => {
                  // 子组件内部自行操作ref实例完成翻页
                  this.flippy?.toggle();
                  // 触发父组件传入的自定义业务逻辑
                  this.props.onCardAction?.();
                }}
              >
                {this.props.title}
              </Button>
            </div>
          </FrontSide>
          <BackSide id="subject-card-back-side">
            <Button
              variant="contained"
              id="subject-card-back-button-back"
              onClick={() => this.flippy?.toggle()}
            >
              Inapoi
            </Button>
          </BackSide>
        </Flippy>
      </div>
    </div>
  );
}

调整后的父组件调用逻辑 #

export class ListaMaterii extends React.Component {
  render() {
    return (
      <div id="lista-materii">
        <SubjectCard
          title="Matematica"
          image={mate}
          alt="Matematica"
          indisponibil="Lectii indisponibile"
          // 仅传入父组件需要处理的业务逻辑，不需要操心子组件内部的翻页操作
          onCardAction={() => {
            console.log('卡片按钮触发，可在此编写数据加载、页面跳转等父组件逻辑');
          }}
        />
      </div>
    );
  }
}

注意：如果后续业务确实需要让父组件直接触发翻页操作，可以通过给SubjectCard挂载ref，在SubjectCard类上暴露公共方法（如toggleFlippy）供父组件调用，不要让父组件直接穿透访问子组件内部的ref值，避免破坏组件封装性。

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