javascript - React 内联函数重新渲染问题

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

请提出一种减轻此问题的方法。我怎样才能最好地发送组合数据？我在这里做错了什么？

标签： javascriptreactjsfunctioncomposition

Answer 1

你有机会看一下 React.Context ( https://reactjs.org/docs/context.html ) 吗？

您可以创建如下内容：

SomeContext.jsx

import React from "react";

export const SomeContext = React.createContext();

索引.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>
);

希望它可以帮助你。