如何使用内联样式显示来自文本区的代码？

Question

我的应用程序由两个组件组成。

在左边，我有一个文本区域，它将输入保存到一个状态变量中，传递给另一个组件，该组件将“翻译”输入并显示else。由于输入将被翻译成html代码，所以我想在右边显示样式化的代码（这是一个电子邮件表单，和lt；将被更改为和gt；将被更改为>)。

因此最终结果将是带有内联样式的html代码。我如何输出结果的样式和所有？

这个主意在我脑子里有点像密码本。谢谢！

到目前为止，我已经完成了这些组件：

app.js：

import "./App.css";

// component imports
import TextFields from "../TextFields/TextFields";
import Display from "../EmailPart/Display";

function App() {
  return (
    <div className='App'>
      <h1>Translate your shit here</h1>
      <div>
        <TextFields />
      </div>
    </div>
  );
}

export default App;

文本字段部分：

import React from "react";
import { useState } from "react";
import Display from "../EmailPart/Display";
import "./TextFields.css";

    const TextFields = () => {
      const [input, setInput] = useState([""]);
    
      return (
        <div class='text_holder'>
          <textarea
            onChange={(e) => setInput(e.target.value)}
            className='input_field'>
            Put your amazing shit herer
          </textarea>
          <div class='display_holder'>
            <Display input={input} />
          </div>
        </div>
      );
    };
    
    export default TextFields;

和显示：

import React from "react";
import { useState } from "react";

const Display = (props) => {
  const { input } = props;
  return (
    <div>
      <p>{input}</p>
    </div>
  );
};

export default Display;

Answer 1

您可以使用dangerouslysetinnerHTML道具。不推荐这样做，因为您的站点容易受到XSS攻击。

下面是一个简单的代码：

function createMarkup(input) {
  return { __html: input } //the key has to be "__html" exactly
}

function Display({ input }) {
  return (
    <div dangerouslySetInnerHTML={createMarkup(input)} />
  )
}