如何正确分离组件中的功能?
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>
);
}
}
我需要将函数调用从组件移至单独的函数
<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>
);
}
}