矩形擴展中間件

首先，我來了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

矩形擴展中間件

回答

相關問題