可以危险地SetInnerHTML保留标签名称的大小写吗？

Question

I have the following:

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

Which I want to render, so using dangerouslySetInnerHTML I try

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

But it renders <navlink to="/mypage">Click Me</navlink> (notice tag names all lower case)

Which means the <NavLink /> component is now not recognised.

Is there a way to preserve the case?

Answer 1

As @Felix mentioned, dangerouslySetInnerHTML is for rendering HTML, not JSX.

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

You should be able to just render this as:

{this.props.message}

Alternatively, you could use a render prop:

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);

CodeSandbox here .