Question

在reactJs中我有两个文件，其中一个具有实用功能，另一个我想使用这些功能。

就像一个例子：

file1.js

import React, {Component} from 'react';

class CloseableTab extends Component {
    constructor() {
        super();
        this.state = tabs;

        this.addItem = (link) => {
            this.setState({
                activeIndex: this.state.data.length
            });
        };
    }
}

export default CloseableTab

所以，在上面的代码中你可以看到我有＆＃34; addItem＆＃34; CloseableTab类中的命名函数或方法。 [其中包含我想在另一个文件中使用的功能。]

File2.js

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

class ProductList extends Component {
  this.appendItem = (item) => {
            addItems(item); //here i want to use the functionality method.
        };
}

export default ProductList

所以，在上面的file2.js中，我用一个参数项调用addItems，我知道哪种技术不正确。所以需要帮助。

想知道如何在onClick / in onClick函数中调用函数方法[add1tem（）从file1]到file2？

我非常感谢你的回答，谢谢。

Answer 1

你需要lift the state up到一个共同的祖先：

class Parent extends React.Component {
    constructor() {
        super();
        this.state = tabs;

        this.addItem = (link) => {
            this.setState({
                activeIndex: this.state.data.length
            });
        };
    }

    render() {
      return (
        <div>
          <CloseableTab tabs={this.state.tabs} addItem={this.addItem} />
          <ProductList tabs={this.state.tabs} addItem={this.addItem} />
        </div>
      )
    }

}

如何从reactJs中的另一个组件调用函数

1 个答案: