矩形扩展中间件

首先，我来了PHP的背景，我目前有点构建中间件反应，我会做这个会是这样的方式：矩形扩展中间件

class Middleware extends React.Component { 
 
    funcOne(data) { 
 
    return data; 
 
    } 
 

 
    funcTwo(data) { 
 
    return (
 
     <div> 
 
     { data } 
 
     <br /> 
 
     { this.funcThree('Third function') } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class MyComponent extends Middleware { 
 
    funcOne(data) { 
 
    return `Rewrite of ${data}`; 
 
    } 
 

 
    funcThree(data) { 
 
    return data; 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     { this.funcOne('First function') } 
 
     { this.funcTwo('Second function') } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class MySecondComponent extends Middleware { 
 
    funcThree(data) { 
 
    return data; 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     { this.funcOne('First function') } 
 
     { this.funcTwo('Second function') } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <div> 
 
    <MyComponent /> 
 
    <hr /> 
 
    <MySecondComponent /> 
 
    </div>, 
 
    document.getElementById('root'), 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 
<div id="root"></div>

但是我真的找不到有关是否做这件事的任何文件。那么，这是错的？如果是这样，我应该怎么做呢？

来源

2017-04-11 Touchpad

在更新的代码，只需创建funcTwo一个组件，并通过一个道具吧：

function funcOne() { 
    return 'First function'; 
} 

function Two (props) { 
    return (
    <div> 
     Second function 
     <br /> 
     { props.three } 
    </div> 
); 
} 

//... 

    render() { 
    return (
     <div> 
     { funcOne() } 
     <br /> 
     <Two three={this.funcThree()} /> 
     </div> 
    ); 
    }

我从来没有见过的阵营必须使用继承任何使用情况。在你的情况下，只需创建组件或普通功能。此外，组件也可以是一个普通的功能：

这可能是一个组件：

function One (props) { 
    return <h1>hello</h1> 
}

你使用这样的：

<One />

或者，如果你只需要串简单地说，写功能：

function funcOne() { 
    return 'First function'; 
} 

function funcTwo() { 
    return 'Second function'; 
} 

// ... 

    render() { 
    return (
     <div> 
     { funcOne() } 
     <br /> 
     { funcTwo() } 
     </div> 
    ); 
    }

因此，你根本不需要继承。在JavaScript中，特别是React，你应该尝试以更实用的方式思考。你会发现它非常强大和灵活。

您可以找到有关组件组成这里的官方文档：https://facebook.github.io/react/docs/composition-vs-inheritance.html

我也建议你阅读本：https://facebook.github.io/react/docs/thinking-in-react.html

来源

2017-04-11 09:23:56 CodinCat

嗨，我确实简化了一些组件，但是我会在组件中使用组件函数，例如'componentWillUnmount'aso，我也会喜欢在其他组件中使用“上”组件 – Touchpad

我肯定会再次回答这个问题 - 我想在所有的时间里，我一直在使用React，我从来没有*必须继承一个组件（并且如链接到文档，他们积极建议不要这样做）。 –

有问题的组件将在整个项目中广泛使用，我真的不知道Hoc如何让你按照我的意愿来回发送功能 – Touchpad

你想要实现的通常称为高阶分量。 Here是详细的文档。

来源

2017-04-11 09:10:44

请问一个更高阶的组件可以访问低阶组件的功能？（更新了我的原始问题） – Touchpad

不，不会，高阶组件包装具有共享方法的组件。因此，在实现这些低阶组件时，您不必一直写相同的方法。这是你正在尝试做的事，对吧？ –

我基本上是试图为我发送给它的任何数据创建一个“处理程序”，然后很糟糕的机会，如果需要我修改处理程序 – Touchpad

我想你重用的方式作出反应的世界是通过创建需要的功能组件并返回一个具有附加功能的新组件，并将其包装在一个为其添加功能的组件中。

这可以通过将想要“派生”功能的组件传递给函数或直接将其包装在“包装器”组件中并访问props.children属性中的“包装”组件来完成。

const componentWithDropTargetCapabilities = addDragAndDrop(MyComponent)

或

<DropTarget> 
    <MyComponent /> 
</DropTarget>

那些被称为 “高位成分”（HOC）： https://facebook.github.io/react/docs/higher-order-components.html

看一看AR反应-路由器的代码，例如：https://github.com/ReactTraining/react-router

来源

2017-04-11 09:26:10

从我阅读Hoc的方式，它不会与我的问题的更新版本，或我错过了什么吗？ – Touchpad

不是很清楚你想达到什么。问题片段的输出是否正常？你能说清楚真实的使用案例吗？ –

我的最佳场景是一个“模型”组件，它具有基本功能，可以在其中发送数据，然后使组件执行某些操作，但是我希望能够修改某些步骤而无需更改/添加到“上层”组件在这些情况下，我需要它有点不同 – Touchpad

矩形扩展中间件

回答

相关问题