Определение и экспорт HOC в React

Question

Определение и экспорт HOC в React

Я исследовал компоненты более высокого порядка в react. Мое требование состоит в том, что у меня есть набор компонентов, которые мне нужно расширить, чтобы дать им больше функциональности без перезаписи всего компонента. В этом случае я обнаружил концепцию HOC в react, где можно расширить компонент, используя чистую функцию. Мой вопрос заключается в том, Могу ли я экспортировать расширенный компонент как обычный компонент. Для примера

Компонент, который должен быть расширен

class foo extends React.Component {

    render(){

        //something

    }

}



export default foo;

HOC компонент

function bar(foo) {

    render() {

         return <foo {...this.props} {...this.state} />;

    }

}



export default bar;

Могу ли я использовать компонент таким образом? или я делаю это неправильно?

540 3

javascript reactjs components higher-order-components

3 ответов:

Comments

Ничего не найдено.

Shubham Khatri · Accepted Answer · 2017-11-28 12:52:15

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);
Который теперь можно использовать как
return (
    <NewFoo {...somePropsHere} />
)
Кроме того, вы можете разрешить HOC взять компонент по умолчанию и экспортировать его как компонент по умолчанию и использовать его в другом месте как
function bar(Foo = MyComponent) {
, а затем создайте экспорт типа
const wrapMyComponent = Foo();
export { wrapMyComponent as MyComponent };
Типичным случаем использования HOC может быть Функциональность HandleClickOutside, в которой вы передадите компонент, который должен выполнить действие на основе функциональности handleClickOutside

Cyril · Accepted Answer · 2017-11-28 11:53:35

Другой способ может быть таким:

Сделать компонент 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')
);

Рабочий код здесь

Nick Maina · Accepted Answer · 2017-11-28 12:05:37

Да, вы можете
const bar = (Foo) => {
   return class MyComponent extend Component {
        render() {
            return <Foo {...this.props} />
        }
   }
}
/ / Наш Код Компонента Foo Здесь
export default bar(Foo)
Но опять же это зависит от функциональности. Например: предположим, вы используете react router и хотите проверить, присутствует ли пользователь, прежде чем отрисовывать компонент, не передавайте HOC. например:
<Route path="/baz" component={auth(Foo)} />
Вместо этого используйте новый компонент.

Примечание: NewComponent подключается к redux и пользователь (состояние) передается как props
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} />