Реагировать на проблему перерисовки встроенных функций - PullRequest
Новая
       12

Реагировать на проблему перерисовки встроенных функций

0 голосов
/ 31 августа 2018

У меня есть компонент, который использует два вложенных компонента, основанных на шаблоне рендеринга. Мне нужно объединить реквизиты от обоих из них, чтобы отправить к самой внутренней функции. 

<Component1>
  {(...props1) => (
    <Component2>
      {(...props2) => <MyComponent {...props1} {...props2} />}
    </Component2>
  )}
</Component1>

Теперь я хотел бы преобразовать вышеупомянутые встроенные функции в функции класса, чтобы избежать создания новых функций при каждом рендеринге. Первая попытка: 

render() {
  return <Component1>{this._render1}</Component1>;
}
_render1 = (...props1) => <Component2>{this._render2}</Component2>;

_render2 = (...props2) => <MyComponent {...props1} {...props2} />;

Но теперь, в render2, у меня нет доступа к props1, поэтому я сделал: 

render() {
  return <Component1>{this._render1}</Component1>;
}
_render1 = (...props1) => <Component2>{this._render2(...props1)}</Component2>;

_render2 = (...props1) => (...props2) => <MyComponent {...props1} {...props2} />;

Но здесь я снова возвращаюсь к первоначальной проблеме воссоздания встроенных функций на каждом рендере (внутри _render2).

Пожалуйста, предложите способ смягчить эту проблему. Как я могу лучше всего отправить объединенные данные вниз? Что я тут не так делаю?

1 Ответ

0 голосов
/ 31 августа 2018

У вас была возможность взглянуть на React.Context (https://reactjs.org/docs/context.html)?

Вы можете создать что-то вроде:

SomeContext.jsx 

import React from "react";

export const SomeContext = React.createContext();

index.jsx 

 <SomeContext.Provider value={this.state.contextState}>
    <div>
      ....
      <Component2 />
      <MyComponent />
      ...
    </div>
  </SomeContext.Provider>

Component2.jsx / MyComponent.jsx 

import React from "react";
import { SomeContext } from "./SomeContext";

export default () => (
  <SomeContext.Consumer>
      your jsx with access to the props from parent.
  </SomeContext.Consumer>
);

Надеюсь, это поможет вам.

...