小编Avi*_*Avi的帖子

假设我有一个组件，它将一个元素作为名为 customHeader 的 prop：

const Example = ({ children, customHeader }) => {\n  ...some code  \n\n  return (\n    <>\n      {customHeader ? customHeader : <div>Default Header</div>}\n      {children}\n    </>\n  );\n}\n

然后，在使用该Example组件的地方，我执行以下操作：

<Example customHeader={<div>blah</div>}>\n  <div>children</div>\n</Example>\n

到目前为止，这是相当标准的东西，一切正常，但我遇到的问题是，我希望能够customHeader通过执行类似的操作来获取元素的尺寸customHeader.clientHeight，但这是行不通的。当我console.log这样做时，我打印出了这个对象：

{\n  $$typeof: Symbol(react.element)\n  key: ".0"\n  props: {children: 'Blah'}\n  ref: null\n  type: "div"\n  _owner: FiberNode {tag: 0, key: null, stateNode: null, elementType: \xc6\x92, type: \xc6\x92, \xe2\x80\xa6}\n  _store: {validated: false}\n}\n

有没有办法将作为 prop 传递的 JSX 元素转换为“普通”HTML …