时间戳

首页 > 解决方案 > 组件是否有可能知道它在哪里“实现”与“渲染”

reactjs - 组件是否有可能知道它在哪里“实现”与“渲染”

问题描述

在下面的代码中，我希望PrintContext组件打印它“实现”位置的上下文，这与最终“渲染”的位置不同。注意*Wants to be "app"下面代码中的文本 - 组件在PrintContext组件内部实现App，但最终呈现为子组件Parent（因此在不同的上下文中）。组件是否有可能知道它是在哪里实现的？

注意：我完全理解它为什么会这样工作——我只是好奇是否有任何方法可以区分组件的实现位置和最终呈现的位置。

更新：我意识到唯一真正的解决方案是能够将组件传递给一个函数，该函数将返回相同的组件，但某些后代用新的道具装饰。有人知道这是否可能吗？

这是一支笔：https ://codepen.io/DesignByOnyx/pen/MWbRjBy

const MyContext = React.createContext('asdf')

const PrintContext = () => {
  const ctx = React.useContext(MyContext)
  return <>{ctx}<br /></>
}

const Child = () => {
  return (
    <MyContext.Provider value="child">
      Should be "child": <PrintContext />
    </MyContext.Provider>
  )
}

const Parent = (props) => {
  return (
    <MyContext.Provider value="parent">
      <Child />
      Should be "parent": <PrintContext />
      {props.children}
    </MyContext.Provider>
  )
}

const App = () => {
  return (
    <MyContext.Provider value="app">
      <Parent>
        *Wants to be "app": <PrintContext />
      </Parent>
      Should be "app": <PrintContext />
    </MyContext.Provider>
  )
}

标签： reactjsreact-contextuse-context

解决方案

如果你眯起眼睛，你会同意你连接上下文的方式看起来像一个原型链吗？

class App {};
App.prototype.ctx = 'app';

class Parent extends App {};
Parent.prototype.ctx = 'parent';

class Child extends Parent {};
Child.prototype.ctx = 'child';

class WantsToBeApp extends Parent {};
class ShouldBeParent extends Parent {};
class ShouldBeChild extends Child {};
class ShouldBeApp extends App {};

const printContext = x => x.ctx

printContext( new WantsToBeApp() ); // parent
printContext( new ShouldBeParent() ); // parent
printContext( new ShouldBeChild() ); // child
printContext( new ShouldBeApp() ); // app

忽略依赖项指向的方向。读“WantsToBeApp extends Parent”是不是感觉不对？我的意思是，如果我遇到了那个组件，我会告诉他们真正的美在于内在；）定义您定义的关系并且不希望它们那样存在是不可能的，不一致的。

你没有给出用例，所以很难想象你为什么要这样做，但显然，如果你需要灵活性，你不想像那样耦合组件。一切都被锁定到位，一种方式是通过父/子关系，另一种方式是通过上下文绑定。

推荐阅读