如何在无状态条件外部反应组件中返回传递和返回变量?

Question

我想向无状态函数触发一些变量，并在现有的基于类的代码中返回它们。

这是我Home组件。

import React, { Component } from 'react';
import External from '/External';
class Home extends Component {
componentDidMount() {
External(true);
}
componentWillUnmount() {
External(false);
}
render(){
return (
<div className="homePage pageWrapper">
Hello
</div>
)
}
}

export default Home;

这是我的外部组件，将在许多页面上使用。我希望重用它的功能。

const External = ({}) => {
if(true){
return console.log('yes');
// do something to the DOM
} else {
return console.log('no');
}
};

我尝试让它this.External()，我尝试External('true')传递文本，但这也不起作用。控制台仅发出警告

Line 2: 'External' is assigned a value but never used no-unused-vars

Answer 1

no-unused-varsESLint 警告表示代码存在实际问题。External不会导出，因此不会使用。

它应该是默认导出之一：

export ({}) => ...

和

import External from '/External';

或命名导出：

export const External = ({}) => ...

和

import { External } from '/External';