Reactjs 在元素内部反应更改值

我有这样一个元素：

var element = 
<div> 
    <span>37</span> 
    <span>increased</span>
<div>

var元素=
37
增加

我想通过在37之后添加“activities”来修改此元素，使其成为：

var element = 
<div> 
    <span>37 Activities</span> 
    <span>increased</span>
<div>

var元素=
37项活动
增加

我对如何改变这个元素感到困惑。有没有办法将字符串活动“注入”到元素中

注意：我没有访问返回

元素的函数的权限。我能做的是修改
元素

谢谢，解释有点不清楚。据我所知，您希望在
37
之后的
span
标记中添加
字符串
活动。我添加了一种使用香草javascript实现这一点的方法。获取页面上的所有span标记并进行操作


导出默认函数App（）{
变量元素=(
37
增加
)
常量添加=（）=>{
document.getElementsByTagName（'span'）[0].innerHTML+='Activities'；
}
返回(
{element}
add（）}>add
);
}

希望这个解决方案有帮助
 谢谢。不幸的是，该元素是由另一个组件返回的。我无法通过添加
{str}
来更改它。如果我可以添加
{str}
，我就可以添加字符串
Activities
。我想知道我是否可以使用一些操作来修改它。你能编辑你的帖子，使其成为一个完整的、独立的答案，代码不依赖于链接吗？@holdoffuinger补充道！为什么您不能访问返回元素的函数？另一种方法是
cloneElement
并迭代子节点，直到到达正确的节点，但这将是一种徒劳的痛苦。很可能有一些元素正在接收
37
作为属性。只需将其更改为
37活动
export default function App() {
  var element = (
   <div> 
    <span>37 </span> 
    <span>increased</span>
   </div>
  )
  const add = () => {
    document.getElementsByTagName('span')[0].innerHTML += 'Activities';
  }
 return (
   <div>
    {element}
    <button onClick={() => add()}> Add</button>
  </div>
 );
}