Как я могу вернуть переменные pass и return в компоненте условного внешнего реагирования без состояния?

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-vars Предупреждение ESLint указывает на реальную проблему с кодом. External не экспортируется и поэтому не используется.

Это должен быть экспорт по умолчанию:

export ({}) => ...

а также

import External from '/External';

Или названный экспорт:

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

а также

import { External } from '/External';