ReactJS中如何从另一个组件调用函数？

我来帮你解决这个问题～你现在的问题是想在ProductList组件里调用CloseableTab组件的addItem实例方法，对吧？首先得明确：类组件的实例方法必须通过组件的实例才能调用，不能直接像普通函数那样调用。下面给你两种常用的解决方案：

方法一：使用React Refs（父子组件场景） #

如果你的ProductList组件是直接渲染CloseableTab组件的父组件，用Refs是最直接的方式，它能让你获取到CloseableTab的组件实例，进而调用它的方法。

首先修正一下命名问题：你在file1里导出的是CloseableTab，但file2里导入的是CloseableTabs，这个笔误会导致报错，先改过来。然后修改File2.js的代码：

import React, {Component} from 'react';
import CloseableTab from '../../containers/CloseableTab/CloseableTab'; // 修正命名

class ProductList extends Component {
  constructor(props) {
    super(props);
    // 创建一个Ref来存储CloseableTab的实例
    this.closeableTabRef = React.createRef();
  }

  appendItem = (item) => {
    // 通过Ref的current属性获取组件实例，调用addItem方法
    this.closeableTabRef.current.addItem(item);
  };

  render() {
    return (
      <div>
        {/* 渲染CloseableTab并绑定Ref */}
        <CloseableTab ref={this.closeableTabRef} />
        {/* 示例：点击按钮触发调用 */}
        <button onClick={() => this.appendItem('https://example.com/new-tab')}>
          添加新标签
        </button>
      </div>
    );
  }
}

export default ProductList

另外，你CloseableTab里的addItem用了箭头函数，已经自动绑定了组件实例的this，所以不需要额外处理this指向的问题，这点做得很好～

方法二：状态提升（兄弟/跨层级组件场景） #

如果ProductList和CloseableTab是兄弟组件，或者层级比较深，用状态提升会更符合React的数据流理念：把共享的状态和方法放到它们共同的父组件中，再通过props传递给子组件。

1. 创建共同的父组件 #

import React, {Component} from 'react';
import CloseableTab from './CloseableTab';
import ProductList from './ProductList';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    // 把tabs状态放到父组件管理
    this.state = {
      tabs: [],
      activeIndex: 0
    };
  }

  // 把addItem方法放到父组件，供子组件调用
  addItem = (link) => {
    this.setState(prevState => ({
      activeIndex: prevState.tabs.length,
      tabs: [...prevState.tabs, link] // 假设要把新link添加到tabs数组
    }));
  };

  render() {
    return (
      <div>
        {/* 把状态和方法传递给CloseableTab */}
        <CloseableTab 
          tabs={this.state.tabs} 
          activeIndex={this.state.activeIndex}
        />
        {/* 把addItem方法传递给ProductList */}
        <ProductList addItem={this.addItem} />
      </div>
    );
  }
}

2. 修改CloseableTab组件（接收props） #

import React, {Component} from 'react';

class CloseableTab extends Component {
  // 不再自己维护状态，直接使用父组件传递的props
  render() {
    const { tabs, activeIndex } = this.props;
    return (
      <div>
        {/* 这里写你的标签渲染逻辑，比如遍历tabs */}
        {tabs.map((tab, index) => (
          <div key={index} className={index === activeIndex ? 'active' : ''}>
            {tab}
          </div>
        ))}
      </div>
    );
  }
}

export default CloseableTab

3. 修改ProductList组件（调用props里的方法） #

import React, {Component} from 'react';

class ProductList extends Component {
  appendItem = (item) => {
    // 直接调用父组件传递过来的addItem方法
    this.props.addItem(item);
  };

  render() {
    return (
      <div>
        {/* 示例：点击按钮调用 */}
        <button onClick={() => this.appendItem('https://example.com/new-product')}>
          添加产品标签
        </button>
        {/* 也可以直接在onClick里调用，不需要中间函数 */}
        <button onClick={() => this.props.addItem('https://example.com/direct-tab')}>
          直接添加标签
        </button>
      </div>
    );
  }
}

export default ProductList

小提示 #

• 如果你的组件是函数组件，可以用useRef钩子来替代React.createRef，用法类似。
• 如果组件层级非常深，状态提升会显得繁琐，这时候可以考虑用React Context或者Redux这类状态管理工具来共享方法和状态。

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