Javascript 使用react router v4以编程方式导航，并将jsx传递给目标组件

我有一个组件，显示道具中提供的信息

是否有一种方法可以通过编程导航到此组件并将jsx代码传递给他

对于简单字符串（不是jsx），我将执行以下操作：

this.props.history.push("/mycomponent", { message: "Just a text" });

在目标组件中：

const {message} = this.props.location.state;

但是，如果我在

message

中包含任何jsx节点，即

Smiley

它将显示为纯文本

除了使用

危险的setinenerHTML

之外，还有其他方法可以实现这一点吗？如果不是，在这种情况下使用它是否安全

class MyComponent extends Component {
    returnMessage = () => {
        // this.props.location.state.message = 'Smiley <i className="far fa-smile"/>'
        return {__html: this.props.location.state.message};
    }
    render() {
      return <div dangerouslySetInnerHTML={returnMessage()} />;
    }
}

export default MyComponent;

类MyComponent扩展组件{
returnMessage=（）=>{
//this.props.location.state.message='Smiley'
返回{uuuhtml:this.props.location.state.message}；
}
render（）{
返回；
}
}
导出默认MyComponent；

由于它只是一个字符串，所以不能这样渲染吗<代码>返回{this.props.location.state.message}哦，我知道你想像我找到的答案一样包含htmlI，而还有其他方法将该字符串解析为html（或jsx）它们确实遇到了相同的漏洞，用户可能会在其中插入脚本标记或恶意内容。所以，如果你只是清理你的数据，让你的后端安全，你应该是g2g。@MichaelSorensen。我猜最初的标题误导了你。很抱歉