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

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

和

import { External } from '/External';

如何在无状态的条件外部React组件中返回pass和返回变量？

1 个答案: