Question

我有以下内容：

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

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

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

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

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

有没有办法保存案件？

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

CodeSandbox here。

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

1 个答案: