gpt4 book ai didi

javascript - React 组件不渲染内容

转载 作者:行者123 更新时间:2023-12-03 02:57:34 26 4
gpt4 key购买 nike

import React, { Component } from 'react';
import './Imprint.scss';
import ReactMarkdown from 'react-markdown';
import ContentSection from '../ContentSection';
import axios from 'axios';
import { IMPRINT_URL } from '../../auth_axios';

class Imprint extends Component {
constructor(props) {
super(props);

this.state = {
imprintText: null,
}
}
componentDidMount() {
this.fetchImprint();
}
render() {
const {
imprintText
} = this.state;
return (
<section className="bsl-imprint row">
<ContentSection>
<div className="col-xs-12 col-md-6 col-md-offset-3">
<h2 className="bs-main-heading">Imprint</h2>
<p>
<ReactMarkdown source={imprintText}/>
</p>
</div>
</ContentSection>
</section>
);
}
fetchImprint() {
axios.get(IMPRINT_URL)
.then(res => {
console.log(res)
this.setState({imprintText: res.data})
})
.catch(err => {
console.log(err);
});
}
}

export default Imprint;

我正在使用 React 15.4、Redux 3.7 和 Babel 来渲染一些文本。因此,我尝试在组件内的 ReactMarkdown 标记上渲染 imprintText,但它显示的是纯 HTML 代码而不是内容。我提供了一个屏幕截图来向您展示它的外观。有任何想法吗??

SCREEN_SHOT

最佳答案

根据react-markdown docs ,您必须设置escapeHtml支持false ,这样 <ReactMarkdown>组件也呈现 HTML,即:

<ReactMarkdown source={imprintText} escapeHtml={false}/>

这是 not generally recommended to use dangerouslySetInnerHTML 。另外,我认为你的imprintText不需要所有<head><body>标签,只是 <div>标签开始就足够了。

关于javascript - React 组件不渲染内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47550542/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com