Question

我有一个组件，该组件使用两个基于渲染道具模式的嵌套组件。我需要将两者的道具组合在一起，以发送到最里面的功能。

<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内部）重新创建内联函数的原始问题。

请提出减轻此问题的方法。如何最好地将合并的数据向下发送？我在这里做什么错了？

Answer 1

您有没有机会看一下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>
);

希望它对您有帮助。

反应内联函数重新渲染问题

1 个答案: