在文本区域内呈现 XML答案

【问题标题】：Rendering XML inside text area在文本区域内呈现 XML
【发布时间】：2020-04-29 23:50:42
【问题描述】：

我正在编写一个从我的 API 返回 XML 的反应代码，现在我想在文本区域内显示相同的 XML 是一种实现方式吗？

class XmlCall extends Component { constructor(props) { 超级（道具）；这个.state = { 回调数据：[] }; }

【问题讨论】：

可以多加些XmlCall组件的代码吗？

【解决方案1】：

在 componentDidMount 函数中从 API 获取您的 xml 后，您可以拥有一个 render 方法，其中包含带有 xml 的 html 标记。

class XmlCall extends Component { 
 constructor(props) { 
  super(props); this.state = { callBackData: [] }; 
 }
 componentDidMount(){
  const fetchedData = //Fetch with an API like fetch or axios. Careful with async functions here.
  this.setState(callBackData: fetchedData); 
 }
 render(){
  return(
   <div>
    <textarea>{this.state.callBackData}</textarea>
   </div>
  );
 }
}

【讨论】：

【解决方案2】：

只需将它分配给一个变量并渲染它。 React 会注意渲染的内容是否被正确转义。

看到这个fiddle。

  render() {
    const xmlcontent = '<test></test>'

    return (
      <div>
        <h2>Textarea:</h2>
        <textarea>{xmlcontent}</textarea>
      </div>
    )
  }

【讨论】：