扩展“组件”;未捕获的类型错误:超级表达式必须为空或函数,而不是对象[重复]
2017-06-04
1246
我正在尝试扩展 React Component 以实现我不喜欢一遍又一遍做的事情,即
this.onInputChange = this.onInputChange.bind(this);
要求。到目前为止,我已经尝试过:
MyComponent.js-
import React, { Component } from 'react';
// function bindReactMethod(this_value, method_name) {
// // Bind all of your custom methods, like:
// // this.onInputChange = this.onInputChange.bind(this);
// this_value[method_name] = this_value[method_name].bind(this_value)
// }
// https://stackoverflow.com/questions/15192722/javascript-extending-class
class MyComponent extends Component {
constructor(props) {
super(props);
this.bindReactMethods = this.bindReactMethods.bind(this)
}
bindReactMethods(this_value, method_name) {
// Bind all of your custom methods, like:
// this.onInputChange = this.onInputChange.bind(this);
this_value[method_name] = this_value[method_name].bind(this_value)
}
}
SearchBar.js-
import React from 'react';
import MyComponent from '../utils/MyComponent';
export default class SearchBar extends MyComponent {
constructor(props) {
super(props);
this.state = {term: ''};
this.bindReactMethods(['onInputChange'])
}
onInputChange(event) {
console.log(event.target.value);
this.setState({term: event.target.value})
}
失败,
Uncaught TypeError: Super expression must either be null or a function, not object
以及
MyComponent.js-
import React, { Component } from 'react';
function bindReactMethod(this_value, method_name) {
// Bind all of your custom methods, like:
// this.onInputChange = this.onInputChange.bind(this);
this_value[method_name] = this_value[method_name].bind(this_value)
}
// https://stackoverflow.com/questions/15192722/javascript-extending-class
class MyComponent extends Component {
constructor(props, custom_methods=[]) {
super(props);
try {
custom_methods.map((method_name) => {
bindReactMethod(this, method_name)
});
}
catch (error) { } // ignore error because that means the user didnt have custom methods to bind
}
}
SearchBar.js-
import React from 'react';
import MyComponent from '../utils/MyComponent';
export default class SearchBar extends MyComponent {
constructor(props) {
super(props, ['onInputChange']);
this.state = {term: ''};
}
onInputChange(event) {
console.log(event.target.value);
this.setState({term: event.target.value})
}
也失败,
Uncaught TypeError: Super expression must either be null or a function, not object
我想扩展
Component
并始终使用我的组件,此
bindReactMethods
回调是可选的。
2个回答
MyComponent
只是没有被导出,代码的工作方式如下:
import React, { Component } from 'react';
function bindReactMethod(this_value, method_name) {
// Bind all of your custom methods, like:
// this.onInputChange = this.onInputChange.bind(this);
this_value[method_name] = this_value[method_name].bind(this_value)
}
// https://stackoverflow.com/questions/15192722/javascript-extending-class
export default class MyComponent extends Component {
constructor(props, custom_methods=[]) {
super(props);
try {
custom_methods.map((method_name) => {
bindReactMethod(this, method_name)
});
}
catch (error) { } // ignore error because that means the user didnt have custom methods to bind
}
}
和
import React from 'react';
import MyComponent from '../utils/MyComponent';
export default class SearchBar extends MyComponent {
constructor(props) {
super(props, ['onInputChange']);
this.state = {term: ''};
}
onInputChange(event) {
console.log(event.target.value);
this.setState({term: event.target.value})
}
它还允许常规超级,例如
constructor(props) {
super(props);
codyc4321
2017-06-04
在 ReactJS 中你应该使用 Composition 而不是 Inheritance。
React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components. Link to docs
Tukan
2017-06-04