如何在危险的SetInnerHTML中设置默认值反应？

Question

1.创建react组件——customhtmlelement

<customelement>
    <div dangerouslySetInnerHTML={{ __html: this.props.customHtml }} />
</customelement>

2.react组件的使用

<customhtmlelement
 customHtml="<input value={value} disable='true' placeholder='Enter text' type='text' id='test'</input>"/>><<customhtmlelement/>

在文本框中设置默认值。

let value= "test";

它不工作。 如何在innerHtml设置默认值？

Answer 1

试试这个，它可能会有所帮助

import React from "react";
import ReactDOM from "react-dom";
const value = "test";

// inner HTML Example...
function createMarkup() {
  return {
    __html: "<input value="+value+" disable='true' placeholder='Enter text' type='text' id='test'</input>"
  };
}

//React component...
function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

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

Answer 2

为什么要使用dangerouslySetInnerHTML SetInnerHTML 呈现输入？

无论如何，您的代码并不是真正有效的。

尝试这个：

function CustomHTMLElement(props) {
  return <div dangerouslySetInnerHTML={{__html: props.customHtml}} />
}

function App() {
  const value = 'Test Value'

  return (
    <div>
      <CustomHTMLElement
        customHtml={`<input id='test' type='text' placeholder='Enter text' value='${value}' disabled=${true} />`}
      />
    </div>
  )
}

Answer 3

你需要像这样使用，在模板文字的帮助下

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

import "./styles.css";

let value = "text";

function CustomHtmlElement(props) {
  return <div dangerouslySetInnerHTML={{ __html: props.customHtml }} />;
}

function App() {
  return (
    <div className="App">
      <CustomHtmlElement
        customHtml={`<input value=${value} disable='true' placeholder='Enter text' type='text' id='test'</input>`}
      />
    </div>
  );
}

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

工作示例代码和框