Как визуализировать HTML из реквизита MongoDB

Question

Я не могу сделать свой реквизит в HTML. Я делаю приложение для христианского служения, и я хочу иметь возможность публиковать сообщения в виде блога, у меня работает перо, но я не могу показать результат, показывающий чистый HTML.

Я пытался следовать правилам response-render-html, но у меня мало опыта, поэтому я не знаю, чего мне не хватает. Я пытаюсь использовать 'renderHTML', но это не работает.

Ниже приведен мой код, и если вы увидите скриншот, то увидите, что на первой карточке показаны теги HTML.

import React from 'react';
import { Container, Card, Button, CardTitle, CardText, CardColumns, CardSubtitle, CardBody, Collapse } from 'reactstrap';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { connect } from 'react-redux';
import { getPosts, deletePost } from '../actions/postActions';
import PropTypes from 'prop-types';
import axios from 'axios';
import renderHTML from 'react-render-html';

import PostsForm from './extentions/PostsForm';


class Home extends React.Component {
    componentDidMount() {
        this.props.getPosts();
    }

    onDeleteClick = (id) => {
        this.props.deletePost(id);
    }

    constructor(props) {
        super(props);
        this.onEntering = this.onEntering.bind(this);
        this.onEntered = this.onEntered.bind(this);
        this.onExiting = this.onExiting.bind(this);
        this.onExited = this.onExited.bind(this);
        this.toggle = this.toggle.bind(this);
        this.state = {
            collapse: false, 
            status: 'Closed',
            ButtonText: "Submit Post"
        };
      }

    onEntering() {
        this.setState({ status: 'Opening...' });
      }

    onEntered() {
    this.setState({ status: 'Opened' });
    }

    onExiting() {
    this.setState({ status: 'Closing...' });
    }

    onExited() {
    this.setState({ status: 'Closed', ButtonText: "Submit Post" });
    }

    toggle() {
    this.setState(state => ({ collapse: !state.collapse, ButtonText: "Close" }));
    }

    formOpening = () => {
        this.setState({
            on: !this.state.on
        })
    }

    render(){
        const { posts } = this.props.post;
        return(
            <Container>
                <div style={{float: "left"}}><h5>Current state: {this.state.status}</h5></div>
                <div style={{float: "right"}}><Button
                    color="dark"
                    style={{marginButtom: '2rem'}}
                    onClick={this.toggle}>{this.state.ButtonText}</Button></div>
                <Collapse
                  isOpen={this.state.collapse}
                  onEntering={this.onEntering}
                  onEntered={this.onEntered}
                  onExiting={this.onExiting}
                  onExited={this.onExited}
                    style={{clear: "both"}}
                >
                  <Card>
                    <CardBody>
                     <PostsForm />
                    </CardBody>
                  </Card>
                </Collapse>
                <CardColumns style={{clear: "both"}}>
                    <TransitionGroup className="Posts">
                    {posts.map(({ _id, title, subtitle, postbody}) => (
                        <CSSTransition key={_id} timeout={500} classNames="fade">
                            <Card>
                                <CardBody>
                                    <Button className="remove-btn" color="danger" size="sm" onClick={this.onDeleteClick.bind(this, _id)}>&times;</Button>
                                    <CardTitle><h3>{title}</h3></CardTitle>
                                  <CardSubtitle><h4>{subtitle}</h4></CardSubtitle>
                                  <CardText>{postbody}</CardText>
                                  <Button>Read More</Button>
                                </CardBody>
                            </Card>
                        </CSSTransition>
                    ))}
                    </TransitionGroup>
                </CardColumns>
            </Container>
        )
    }
};

Home.propTypes = {
    getPosts: PropTypes.func.isRequired,
    post: PropTypes.object.isRequired
}

const mapStateToProps = (state) => ({
    post: state.post
});

export default connect(mapStateToProps, { getPosts, deletePost })(Home);

Скриншот того, как это выглядит сейчас

Я хотел бы видеть, что карты действуют как

Основной текст и т. Д. И т. Д.

не <p>Body Text ect etc etc</p>

Answer 1

Вы должны использовать опасно SetInnerHTML API.

Из React Docs, немного изменено:

function createMarkup(html) {
  return {__html: html};
}

function MyComponent({html}) {
  return <div dangerouslySetInnerHTML={createMarkup(html)} />;
}

https://reactjs.org/docs/dom-elements.html