0
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を使用してテキストを表示しています。そこで、私はレンダリングしようとしていますimprintTextReactMarkdownタグはコンポーネント内にありますが、コンテンツの代わりにプレーンなHTMLコードを表示しています。私はそれがどのように見えるかを示すスクリーンショットを提供します。何か案は？？Reactコンポーネントでコンテンツがレンダリングされない
私はimprintTextを文字列と見なします。使用する前に有効なhtmlに変換してください。それを試してください – stack26
@ stack26いいえReactMarkdownは 'source' propを文字列として要求します – Dane