我如何 return 在无状态条件外部反应组件中传递和 return 变量？

Question

我想将一些变量触发到无状态函数，并 return 它们在现有的基于 class 的代码中。

这是我的 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-vars ESLint 警告表示代码存在实际问题。 External 未导出，因此未使用。

它应该是默认导出：

export ({}) => ...

和

import External from '/External';

或命名导出：

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

和

import { External } from '/External';

我如何 return 在无状态条件外部反应组件中传递和 return 变量？

How can I return pass and return variables in a stateless conditional external react component?

reactjs

react-component