我目前正在做一个 ReactJS 项目，我需要创建“可重复使用”的组件，其中一些方法需要被“覆盖”。在 OOP 中，我会使用多态性。我读过一些书，似乎共识是使用 HoC/composition，但我不太清楚如何实现这一点。我想如果我可以使用组合获得一个 ES6 示例，那么之后将这个想法应用到 ReactJS 可能会更容易。
下面是一个 ES6 OOP 示例(忽略事件处理，它只是为了测试)几乎是我想在 ReactJS 中实现的。有没有人对如何将 ReactJS 组件分解为 HoC 有一些指导，或者甚至只是演示我将如何根据示例在 ES6 中使用组合？
class TransferComponent {
constructor(){
let timeout = null;
this.render();
this.events();
}
events(){
let scope = this;
document.getElementById('button').addEventListener('click', function(){
scope.validate.apply(scope);
});
}
validate(){
if(this.isValid()){
this.ajax();
}
}
isValid(){
if(document.getElementById('username').value !== ''){
return true;
}
return false;
}
ajax(){
clearTimeout(this.timeout);
document.getElementById('message').textContent = 'Loading...';
this.timeout = setTimeout(function(){
document.getElementById('message').textContent = 'Success';
}, 500);
}
render(){
document.getElementById('content').innerHTML = '<input type="text" id="username" value="username"/>\n\
<button id="button" type="button">Validate</button>';
}
}
class OverrideTransferComponent extends TransferComponent{
isValid(){
if(document.getElementById('username').value !== '' && document.getElementById('password').value !== ''){
return true;
}
return false;
}
render(){
document.getElementById('content').innerHTML = '<input type="text" id="username" value="username"/>\n\
<input type="text" id="password" value="password"/>\n\
<button id="button" type="button">Validate</button>';
}
}
const overrideTransferComponent = new OverrideTransferComponent();<div id="content"></div>
<div id="message"></div>更新: 尽管我最初的问题是关于 FP，但我认为渲染 Prop 是解决我的问题的一个很好的解决方案，并且避免了 HoC 问题。
最佳答案
编辑:
这篇文章已经过时了。对于大多数用例， Hook 更好。
原答案:
关于您的示例代码的答案在本文的中间/底部。
关于 React 组合的一个好方法是 render-callback pattern ，又名函数作为 child 。与 HOC 相比，它的主要优势在于它允许您在运行时动态组合组件(例如在渲染中)，而不是在创作时静态组合。
无论您是使用渲染回调还是 HOC，组件组合的目标都是将可重用行为委托(delegate)给其他组件，然后将这些组件作为 props 传递给需要它们的组件。
抽象例子:
以下 Delegator 组件使用渲染回调模式将实现逻辑委托(delegate)给作为 prop 传入的 ImplementationComponent:
const App = () => <Delegator ImplementationComponent={ImplementationB} />;
class Delegator extends React.Component {
render() {
const { ImplementationComponent } = this.props;
return (
<div>
<ImplementationComponent>
{ ({ doLogic }) => {
/* ... do/render things based on doLogic ... */
} }
</ImplementationComponent>
</div>
);
}
}
各种实现组件如下所示:
class ImplementationA extends React.Component {
doSomeLogic() { /* ... variation A ... */ }
render() {
this.props.children({ doLogic: this.doSomeLogic })
}
}
class ImplementationB extends React.Component {
doSomeLogic() { /* ... variation B ... */ }
render() {
this.props.children({ doLogic: this.doSomeLogic })
}
}
稍后，您可以按照相同的组合模式在 Delegator 组件中嵌套更多子组件:
class Delegator extends React.Component {
render() {
const { ImplementationComponent, AnotherImplementation, SomethingElse } = this.props;
return (
<div>
<ImplementationComponent>
{ ({ doLogic }) => { /* ... */} }
</ImplementationComponent>
<AnotherImplementation>
{ ({ doThings, moreThings }) => { /* ... */} }
</AnotherImplementation>
<SomethingElse>
{ ({ foo, bar }) => { /* ... */} }
</SomethingElse>
</div>
);
}
}
现在嵌套子组件允许多个具体实现:
const App = () => (
<div>
<Delegator
ImplementationComponent={ImplementationB}
AnotherImplementation={AnotherImplementation1}
SomethingElse={SomethingVariationY}
/>
<Delegator
ImplementationComponent={ImplementationC}
AnotherImplementation={AnotherImplementation2}
SomethingElse={SomethingVariationZ}
/>
</div>
);
答案(你的例子):
将上述组合模式应用于您的示例，该解决方案重构了您的代码，但假定它需要执行以下操作:
- 允许输入及其验证逻辑的变化
- 当用户提交有效输入时，然后做一些ajax
首先，为了让事情更简单，我将 DOM 更改为:
<div id="content-inputs"></div>
<div id="content-button"></div>
现在，TransferComponent 只知道如何显示按钮并在按钮被按下且数据有效时执行某些操作。它不知道要显示什么输入或如何验证数据。它将逻辑委托(delegate)给嵌套的 VaryingComponent。
export default class TransferComponent extends React.Component {
constructor() {
super();
this.displayDOMButton = this.displayDOMButton.bind(this);
this.onButtonPress = this.onButtonPress.bind(this);
}
ajax(){
console.log('doing some ajax')
}
onButtonPress({ isValid }) {
if (isValid()) {
this.ajax();
}
}
displayDOMButton({ isValid }) {
document.getElementById('content-button').innerHTML = (
'<button id="button" type="button">Validate</button>'
);
document.getElementById('button')
.addEventListener('click', () => this.onButtonPress({ isValid }));
}
render() {
const { VaryingComponent } = this.props;
const { displayDOMButton } = this;
return (
<div>
<VaryingComponent>
{({ isValid, displayDOMInputs }) => {
displayDOMInputs();
displayDOMButton({ isValid });
return null;
}}
</VaryingComponent>
</div>
)
}
};
现在我们创建 VaryingComponent 的具体实现来充实各种输入显示和验证逻辑。
仅用户名的实现:
export default class UsernameComponent extends React.Component {
isValid(){
return document.getElementById('username').value !== '';
}
displayDOMInputs() {
document.getElementById('content-inputs').innerHTML = (
'<input type="text" id="username" value="username"/>'
);
}
render() {
const { isValid, displayDOMInputs } = this;
return this.props.children({ isValid, displayDOMInputs });
}
}
用户名和密码实现:
export default class UsernamePasswordComponent extends React.Component {
isValid(){
return (
document.getElementById('username').value !== '' &&
document.getElementById('password').value !== ''
);
}
displayDOMInputs() {
document.getElementById('content-inputs').innerHTML = (
'<input type="text" id="username" value="username"/>\n\
<input type="text" id="password" value="password"/>\n'
);
}
render() {
const { isValid, displayDOMInputs } = this;
return this.props.children({ isValid, displayDOMInputs });
}
}
最后，TansferComponent 的组合实例将如下所示:
<TransferComponent VaryingComponent={UsernameComponent} />
<TransferComponent VaryingComponent={UsernamePasswordComponent} />
关于javascript - FP 替代 JavaScript/ReactJS 中的多态性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47232961/