ReactでHOCを定義してエクスポートする

Question

私は反応中のHigher Order Componentsを研究してきました。私の要件は、コンポーネント全体を書き直すことなく、より多くの機能を提供するために拡張する必要があるコンポーネントを設定していることです。この場合、純粋な関数を使用してコンポーネントを拡張することができる反応の概念HOCを見つけました。私の質問は、拡張コンポーネントを通常のコンポーネントとしてエクスポートできるかどうかです。例えば

class foo extends React.Component { 
    render(){ 
     //something 
    } 
} 

export default foo; 

HOC成分

function bar(foo) { 
    render() { 
     return <foo {...this.props} {...this.state} />; 
    } 
} 

export default bar; 

を拡張する必要

成分Iはそのようにコンポーネントを使用することができますか？それとも間違っているのですか？

Answer 1

A HOCを追加したいときにどうなるのか

今すぐ

function bar(Foo) { 

    return class NewComponent extend React.Component { 
     //some added functionalities here 
     render() { 
      return <Foo {...this.props} {...otherAttributes} /> 
     } 
    } 

} 

export default bar; 

で、コンポーネントを取り、いくつかのより多くの機能を追加して、新しいコンポーネントを返すだけでなく、コンポーネントのインスタンスを返しますコンポーネントの一部の機能は、あなたが今

のように使用することができ

const NewFoo = bar(Foo); 

のようなコンポーネントのインスタンスを作成しますあなたはHOCは、そのデフォルトのコンポーネントとして、デフォルトの構成要素と輸出を取り、

function bar(Foo = MyComponent) { 

のような他の場所でそれを使用して、

const wrapMyComponent = Foo(); 
export { wrapMyComponent as MyComponent }; 

Aのようなエクスポートを作成する可能性がさらに

return (
    <NewFoo {...somePropsHere} /> 
) 

HOCの典型的な使用例はHandleClickOutsideの機能になります。これにより、handleClickOutsideの機能に基づいてアクションを起こす必要のあるコンポーネントを渡します

Answer 2

もう一つの方法は、このようなことができます：

HOC部品を作るのFooコンポーネント

class Foo extends React.Component { 
    render() { 
     return (<h1> hello I am in Foo < /h1>) 
     } 
    } 

してください。

class Main extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    const { 
     component, props 
    } = this.props; 
    //extract the dynamic component passed via props. 
    var Component = component; 

    return (<div> 
      <h1> I am in main < /h1> 
      < Component {...props} > < /Component> 
      </div >); 
    } 
} 


ReactDOM.render(< Main component = { 
    Foo 
    } > < /Main>, 
    document.getElementById('example') 
); 

の作業コードhere

Answer 3

はいすることができます。ここ

const bar = (Foo) => { 
    return class MyComponent extend Component { 
     render() { 
      return <Foo {...this.props} /> 
     } 
    } 
} 

//私たちはFooコンポーネントコード

export default bar(Foo) 

しかし、再び、それは機能に依存します。たとえば、反応ルータを使用していて、コンポーネントのレンダリングがHOCを通過しないうちにユーザーが存在するかどうかを確認したいとします。例：

<Route path="/baz" component={auth(Foo)} /> 

代わりに新しいコンポーネントを使用してください。

注NewComponentはReduxの、ユーザに接続されている（状態）経路に続い小道具

class NewRoute extends Component{ 
    render(){ 
     const {component:Component, ...otherProps} = this.props; 

     return(
      <Route render={props => (
      this.props.user? (
       <Component {...otherProps} /> 
      ):(
       <Redirect to="/" /> 
       ) 
      )} 
      /> 
     ); 
    } 
} 

<NewRoute path='/foo' component={Foo} />