React HOC-addラップするイベントリスナー

Question

通常の機能コンポーネント「Touchable」を作成するHOCを作成しようとしています。

だから私はそのようHOCことがあります。

const Touchable = (Component, handler) => { 
    const T = ({props, children}) => { 
    const Instance = React.createElement(
     Component, 
     { 
     ...props, 
     onTouchStart: (e) => handler.touchStart(e), 
     /*more listeners*/ 
     }, children); 
    } 

    return T; 
} 

そうのような別のコンポーネント：（反応する開発者のパネルで

<Button>Hallo</Button> 

結果：

const Button = ({props, children}) => <div>…</div>; 

export default Touchable(Button, {touchStart:() => {}}); 

はそうのようにこれを使用します）：

<Button onTouchStart={…}> 
    <div>…</div> 
</Button> 

しかし、私が本当にしたいと思いますされています。私は、インスタンスのクローンを作成しようとしましたが、どういうわけか私は運を持っていない

<Button> 
    <div onTouchStart={…}>…</div> 
</Button> 

。どうやってやるの？

Answer 1

にカスタム小道具を添付すること作ることができますか？以下のような

何か：

const TouchableHOC = (Component, handler) => 
 
    (props) => 
 
    <Component 
 
     {...props} 
 
     onClick={(event) => handler.touchStart(event)} 
 
    /> 
 

 
const YourComponent = ({ children, onClick }) => 
 
    <button onClick={onClick}>{children}</button> 
 

 

 
const EnhancedComponent = TouchableHOC(
 
    YourComponent, 
 
    { touchStart:() => console.log('touchStart') } 
 
) 
 

 
const WithoutRest = TouchableHOC(
 
    'button', 
 
    { touchStart:() => console.log('touchStart') } 
 
) 
 

 
const App =() => 
 
    <div> 
 
    <EnhancedComponent> 
 
     Click-me 
 
    </EnhancedComponent> 
 
    <WithoutRest> 
 
     No props at all 
 
    </WithoutRest> 
 
    </div> 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('root') 
 
)

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

 
<div id="root"></div>

Answer 2

あなたはReact.cloneElementの使用がchildrenのクローンを作成し、あなただけのReact.createElement部分なしComponentを返すことができません。それら

const Touchable = (Component, handler) => { 
    const T = ({props, children}) => { 
    const Instance = React.createElement(
     Component, 
     props, 
     React.cloneElement(children, { 
      onTouchStart: (e) => handler.touchStart(e), 
      /*more listeners*/ 
     }); 
    ) 
    } 

    return T; 
}