如何使用危险的SetInnerHTML将子字符串放在div上

如何解决如何使用危险的SetInnerHTML将子字符串放在div上

我目前在一个普通的博客网站上工作，我使用 quill 添加或编辑我的博客内容。

并在没有 html 标签的情况下实际显示它。我必须使用危险的 SetInnetHTML。但在那之后。我不能再使用我的子字符串，它只应该显示 200 个字符串。

这是我的代码。

renderBlog(content){
        return <div dangerouslySetInnerHTML={{__html: DOmpurify.sanitize(content)}}></div>
}

renderList(){
        return this.props.blogs.map(blog => {
            return (
                <Card border="dark" style={{ width: '18rem' }} key={blog.title}>
                    <Card.Header>Blog</Card.Header>
                    <Card.Body>
                        <Card.Title className="text-center" ><h4>{blog.title}</h4></Card.Title>
                        <Card.Text className="text-center">{this.renderBlog(blog.content)}<Link to={`/blogs/${blog._id}`}>Read more</Link></Card.Text>
                        <div className="text-center">
                        {this.renderButtons(blog,userId,userProfile)}
                        </div>
                    </Card.Body>
                </Card>
            );
        })
    }

这是我之前使用子字符串的代码。

renderList(){
        const userId = this.props.auth.user && this.props.auth.user._id;
        const userProfile = this.props.auth.user && this.props.auth.user.profile;
        return this.props.blogs.map(blog => {
            return (
                <Card border="dark" style={{ width: '18rem' }} key={blog.title}>
                    <Card.Header>Blog</Card.Header>
                    <Card.Body>
                        <Card.Title className="text-center" ><h4>{blog.title}</h4></Card.Title>
                        <Card.Text className="text-center">{`${blog.content.substring(0,200)}...`}<Link to={`/blogs/${blog._id}`}>Read more</Link></Card.Text>
                        <div className="text-center">
                        {this.renderButtons(blog,userProfile)}
                        </div>
                    </Card.Body>
                </Card>
            );
        })
    }