我正在使用 React Redux 创建简单的应用程序。我想使用装饰器在我的组件中注入一些方法。我在其他项目中看到了类似的代码:
import React, { Component } from 'react';
import { connect } from 'react-redux';
@creatable
export default class BookDetails extends Component {
render() {
console.log(this.props);
if (!this.props.Activebook) {
return <div> please select book</div>
}
return (
<div>{this.props.Activebook.title}</div>
);
}
}
function creatable() {
return Create => {
@connect(state=>({Activebook : state.ActiveBook}))
class MyDecorator extends Component {
render() {
console.log('>>>>>>>>>>>>>');
console.log(this.props);
console.log('>>>>>>>>>>>>>');
return (
<div>
<Create
{...this.props}
/>
</div>
)
}
}
return MyDecorator;
}
}
不幸的是上面的代码不起作用。为什么?
请注意,我们不建议使用装饰器来连接组件。
您在官方文档或示例中找不到它们。
仅仅因为一些社区示例使用它们并不意味着这是一个好主意:规范仍在变化,工具支持很不稳定,坦率地说,你不需要装饰器connect()
因为它们对简单的函数调用进行脱糖处理。
例如,而不是
@connect(mapStateToProps)
class MyComponent extends Component {}
你应该写
class MyComponent extends Component {}
MyComponent = connect(mapStateToProps)(MyComponent)
这样,在提案成为语言的一部分之前,您不必担心它们会被破坏。
我建议您遵守我们在官方 Redux 示例 http://redux.js.org/docs/introduction/Examples.html对于采用实验性语法扩展要非常谨慎。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)