Javascript 元素未更新为新的HTML，元素为onMouseCenter，React.JS

这是一个非常简单的问题，当我将鼠标悬停在页面的导航栏上时（在一个无序列表中），标签应该用一个新值更新。值会更新，但属性HTML标记不会随之呈现（例如，当我尝试将“为什么”值加粗时。我甚至尝试将这两个值存储在两个变量和concat中，但仍然没有成功。任何帮助都将不胜感激

导航条屏幕截图（垂直）：

我的默认道具：

 getDefaultProps: function(){
  var text = '<i className="fa fa-laptop"></i>';
  var text2 = '<b>why<b>';
  return{why: text + text2};
},

getDefaultProps:function（）{
var text=''；
var text2='为什么'；
返回{why:text+text2}；
},

需要更改的线路：

<li value = '3' className = "nav-content" style = {ulTop} onMouseEnter = {this.change} onMouseLeave = {this.out} ref = 'whyTab'><Link to = '/Why'><i className="fa fa-code"></i>{this.props.why}</Link></li>

{this.props.why}

缺少一些相关的代码，但是getDefaultProps只被调用一次——在构建组件时。您可能想将该逻辑放在渲染函数中。嘿，是的，我知道，我只是不想发布我的组件正在做的一切来减少混乱。相反，我只发布了默认的props来显示ev在第一次呈现页面时，代码没有改变我想要的元素。但我找到了原因，因为它将HTML指定为纯文本值，而不是标记。必须调用Ref并执行innerHTML属性才能将文本视为markupNice，您应该为您自己的问题添加一个答案，以供将来的访问者使用当我回到办公室的时候，我会在手机上说：-）