javascript - Wenn React-Komponenten höherer Ordnung verwendet werden, müssen neu erweiterte Status und Requisiten durch die Rückkehr zu Komponenten der niedrigsten Ebene implementiert werden? Was ist der Sinn hiervon?
Werden höherwertige Komponenten als Ersatz für Mixins verwendet? Ich habe die Informationen im Internet überprüft und alle sagten, dass die Kernidee von Komponenten höherer Ordnung darin besteht, die Funktionsmethoden von Komponenten zu erweitern, aber die neuen Requisiten oder Zustände, die schließlich erweitert werden, müssen nicht noch übergeben werden die unterste Kontrollebene für die Umsetzung? Finden Sie das nicht seltsam? Offensichtlich sind Requisiten oder Zustände nur für erweiterte Komponenten verfügbar, aber sie erfordern die Komponenten der untersten Ebene, um sie zu implementieren (muss ich jedes Mal, wenn ich neue Requisiten erweitere, zur untersten Ebene zurückkehren, um mich darum zu kümmern, wie sie implementiert werden? Oder muss ich das tun? Müssen Sie die Erweiterung im Voraus planen? Wie kann ich die Komponenten in Zukunft erweitern?
//TestComponent.js
/* 比如先定义一个组件，这个组件一开始就要考虑到hide属性？这不可能吧，这个hide是后来才拓展出来的 */
var React = require('react');
module.exports = React.createClass({
render: function() {
var className = this.props.hide? "h5-widget-hide" : "";
return (
<p className = {className}>this.props.text</p>
);
}
});//HideWidgetHOC.js
//这个HOC用于点击隐藏控件
var Test = require('./components/TestComponent');
var React = require('react');
var ReactDOM = require('react-dom');
var hoc = function (ComponentClass) {
return React.createClass({
getInitialState: function() {
hide: false
},
componentDidMount: function() {
var that = this;
BaseUtils.createClickEvent($(ReactDOM.findDOMNode(this)), function(e) {
that.setState({
hide: !this.state.hide
});
});
}, // 绑定一个点击事件
render: function() {
var that = this;
//给原组件拓展了点击隐藏功能。
var newProps = Object.asign({}, {this.props}, {hide: that.getHideState()});//明明是新拓展的state，最后却需要到原来被拓展的组件中去考虑怎么实现？不觉得很奇怪吗？
return <ComponentClass {...this.newProps}/> ;
},
getHideState: function() {
return this.state.hide;
}
});
};
var XX = hoc(Test);
ReactDOM.render(<XX text="HelloWorld"/>, document.getElementById('p'));
