如何在React中显示Draft.js格式化的数据?

时间:2019-04-19 22:16:57

标签: javascript reactjs

我的React App中有一个注释框,并使用Draft.js构建它,如下所示。我输入一些文本,并用粗体和斜体按钮设置其格式。然后,我单击评论按钮。单击评论按钮后,将触发sendUserComment函数并更新状态'newComment'。 AXIOS会将它们发送到数据库并返回评论,以便我可以在“ newCommentShow” div中显示评论。

问题是,如果我输入注释作为文本并应用粗体,则数据将以的形式发送到数据库 def quote_req(request): submitted = False if request.method == 'POST': form = QuoteForm(request.POST, request.FILES) description = request.POST['company'] if form.is_valid(): form.save() # assert false send_mail('Contact Form', description, settings.EMAIL_HOST_USER, ['sample@gmail.com'], fail_silently=False) return HttpResponseRedirect('/quote/?submitted=True') else: form = QuoteForm() if 'submitted' in request.GET: submitted = True return render(request, 'quotes/quote.html', {'form': form, 'page_list': Page.objects.all(), 'submitted': submitted})

,返回数据的处理方式相同。 因此,我在'newCommentShow'div中将整个<p><b>Some texts</b></p>看作一个字符串。如何处理该字符串中的标签并显示正确格式的文本?

<p><b>Some texts</b></p>

1 个答案:

答案 0 :(得分:1)

要将HTML直接注入到React组件中,可以使用dangerouslySetInnerHTML

<div className="newComment" dangerouslySetInnerHTML={{ __html: this.state.newComment }} />

注意-根据文档,请谨慎使用此功能,并确保您不会遭受XSS攻击。