Javascript 从存储在变量中的React元素获取文本内容

有没有一种方法可以从存储在不带ref的变量中的React元素获取文本内容

有一个功能组件，它接收

标题

道具，其中包含react元素：

function component({ title }) {
 const content = title.textContent() // Need Something like this
}

而这个

标题

道具可能有如下反应节点：

一些标题

。但我只想在渲染之前在变量中获取节点的内容。可能吗

当I console.log

title

变量时，这是输出，我想要的内容在

props.children

数组中，因此有没有一种方法可以在不遍历键的情况下获取它：

---

我没有找到比遍历对象获取文本更好的解决方案。在TypeScript中：

/**
*遍历任何props.children以获取其组合文本内容。
*
*这不会为可读性添加空格：`helloworld
`
*“你好，世界！”正如所料，但是“你好”
world
`返回
*“Helloworld”，就像https://mdn.io/Node/textContent 做
*
*注：这可能很大程度上取决于React的内部结构。
*/
函数textContent（elem:React.ReactElement | string）：string{
如果（！elem）{
返回“”；
}
如果（元素的类型=='string'）{
返回元素；
}
//对基本内容的调试显示props.children（如果有的话）是
//元素、字符串或具有任意组合的数组。例如
//`你好，世界！
`：
//
//$$typeof:Symbol（react.element）
//类型：“p”
//道具：
//儿童：
//-“你好”
//-$$typeof:Symbol（react.element）
//类型：“em”
//道具：
//儿童：“世界”
//       - "!"
const children=elem.props&&elem.props.children；
if（数组的子实例）{
返回children.map（textContent.join）（“”）；
}
返回文本内容（儿童）；
}

---

我一点也不喜欢它，希望有更好的解决方案。

感谢@Arjan的努力和解决方案，但我已经更改了组件中的某些内容，以字符串格式获取标题。 现在，我在组件中添加了另一个道具：

renderTitle

，它是一个用于呈现自定义标题的函数

现在我将标题作为字符串传递：

<Component
  title="Some content"
  renderTitle={(title) => <div>{title}</div> }
/>

{title}
/>

和内部组件：

  <div>{renderTitle ? renderTitle(title) : title}</div>

{renderTitle？renderTitle（title）：title}

---

通过此实现，我可以使用title作为字符串在组件内部执行我想要的操作，同时还支持自定义title呈现。

只需通过在控制台中展开props来检查内容的存储位置，然后执行title.props.children.attributeThatStoreText来获取值。这对我来说非常有用，谢谢。