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

How correctly separate a function in a component?

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

<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>
    );
}
}

上面的例子抛出错误:

Uncaught TypeError: Cannot read property 'bind' of undefined

在浏览器中呈现。

如果我将函数移到构造函数之外,它会抛出一个编译错误:

Module build failed (from ./node_modules/babel-loader/lib/index.js):

Support for the experimental syntax 'classProperties' isn't currently enabled

哪里出了问题?

这是我的 .babelrc:

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

编辑

之前不知道为什么不能正常运行,可能是webpack报错什么的,不确定。

我在下面提供了适合我的解决方案,它与我最初的预期非常接近。

你几乎把它放在你注释掉的部分了。 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>
        );
    }
}

试试这个

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

另外,如果您的设置正常运行,Benjamin 上面提到的内容应该是好的,您甚至可以在 render it self 中定义函数。

我回到了 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>
    );
}
}