如何从来自 MongoDB 的道具渲染 HTML

Question

我无法在 HTML 中渲染道具。我正在为一个基督教事工制作一个应用程序，我希望能够 post 像一个博客，我有羽毛笔工作，但我无法显示呈现的结果，显示的是纯粹的 HTML。

我一直在尝试遵循react-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);

Screenshot of how it looks now

我想看看卡片的表现如何

正文等等

不是<p>Body Text ect etc etc</p>

Answer 1

您需要危险地使用 SetInnerHTML API。

来自 React 文档，稍作修改：

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

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

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

如何从来自 MongoDB 的道具渲染 HTML

How to render HTML from a prop coming from MongoDB

render

html-rendering

node.js

reactjs

react-quill