如何正确分离组件中的功能？

Question

我需要将函数调用从组件移至单独的函数

<MyComponent 
    getLabel={ ({buttonLabel, value }) => {
        console.log('Placeholder');
        console.log(buttonLabel);
        console.log(value ? value.map( c => { return c.label}) : []);
        return 'test;
    }} />

我试图这样分离它：

class Results extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }

        this.getLabel = this.getLabel.bind(this);

        getLabel = (buttonLabel, value) => {
            console.log('Placeholder');
            console.log(buttonLabel);
        }
    }

    //this throws a compile error
    /*getLabel = (buttonLabel, value) => {
        console.log('Placeholder');
        console.log(buttonLabel);
    }*/

render() {
    return (
        <React.Fragment>
<MyComponent 
    getLabel={this.getLabel} />

        </React.Fragment>
    );
}
}

上面的示例抛出错误：

未捕获的TypeError：无法读取未定义的属性'bind'

在浏览器中渲染。

如果我将函数移出构造函数，则会引发编译错误：

模块构建失败（来自./node_modules/babel-loader/lib/index.js）：

目前尚不支持实验语法'classProperties'已启用

那里怎么了？

这是我的.babelrc：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties"
        ]
    ]
  }

编辑

我不知道为什么以前它不能正常工作，可能是webpack错误，或者不确定。

我在下面提供了对我有用的解决方案，该解决方案与我最初打算的非常接近。

Answer 1

您几乎已将其注释掉了。 getLabel(buttonLabel, value) {应该是定义方法的正确起点。

一种语法正确的方法如下：

class Results extends Component {
    constructor(props) {
        super(props);
        this.state = {};

        this.getLabel = this.getLabel.bind(this);
    }

    getLabel(buttonLabel, value) {
        console.log('Placeholder');
        console.log(buttonLabel);
    }

    render() {
        return (
            <React.Fragment>
                <MyComponent getLabel={this.getLabel}/>
            </React.Fragment>
        );
    }
}

Answer 2

尝试此

['@babel/plugin-proposal-class-properties', { loose: true }]

如果您的设置正常运行，上面提到的本杰明也应该很好，您甚至可以在render it self中定义函数。

Answer 3

我回到了webpack的module.rules中的原始配置：

        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env', '@babel/preset-react'],
                    plugins: ["@babel/plugin-proposal-class-properties"]
                }
            }
        },

并删除.babelrc。

然后仅保留getLabel函数的一个参数，并且将所有参数作为对象。

最终代码如下：

class Results extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }

        this.getLabel = this.getLabel.bind(this);
    }

        getLabel = (element) => {
            console.log('Placeholder');
            console.log(element); // element comes as an object with all passed parameters as properties
        }

render() {
    return (
        <React.Fragment>
<MyComponent 
    getLabel={this.getLabel} />

        </React.Fragment>
    );
}
}