dangerouslySetInnerHTML 可以保留标签名称大小写吗？答案

【问题标题】：Can dangerouslySetInnerHTML preserve tag name case?dangerouslySetInnerHTML 可以保留标签名称大小写吗？
【发布时间】：2018-12-10 19:53:25
【问题描述】：

我有以下：

this.props.message = '<NavLink to="/mypage">Click Me</NavLink>';

我想渲染，所以我尝试使用dangerouslySetInnerHTML

dangerouslySetInnerHTML={{ __html: this.props.message }}

但它呈现<navlink to="/mypage">Click Me</navlink>（注意标签名称全部小写）

这意味着 <NavLink /> 组件现在无法识别。

有没有办法保全案子？

【问题讨论】：

dangerouslySetInnerHTML，顾名思义，是用于渲染 HTML，而不是 JSX。案子无所谓。该字符串永远不会被解释为 JSX。
是的，它需要重新考虑设计 - 谢谢
这也行不通，因为 JSX 通常在构建时转换为“普通”JavaScript，即浏览器永远不会看到或无法对 JSX 做任何事情。但是字符串的值只会在浏览器中计算。
在 React 中渲染字符串不是一项简单的任务，应该尽可能避免。当然应该避免在这里，因为您可以控制this.props.message。参考stackoverflow.com/questions/45645424/…。

标签： reactjs

【解决方案1】：

正如@Felix 提到的，dangerouslySetInnerHTML 用于渲染 HTML，而不是 JSX。

this.props.message = <NavLink to="/mypage">Click Me</NavLink>;

您应该能够将其呈现为：

{this.props.message}

或者，您可以使用 render 属性：

import React from "react";
import ReactDOM from "react-dom";

const A = ({ render, children }) => {
  return <div style={{ fontSize: 40 }}>{render(children)}</div>;
};

const B = ({ name }) => {
  return <div style={{ color: "red" }}>{name}</div>;
};

const App = () => {
  return (
    <A
      render={name => {
        return <B name={name} />;
      }}
    >
      Colin
    </A>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

代码沙盒here.

【讨论】：

不是作为道具传递的
你可以在这里使用 render 道具，我认为（见附录）。