反应内联函数重新发布问题

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>
);

希望它能帮到你。