小编for*_*est的帖子

我使用DOMPurify.sanitize()insidedangerouslySetInnerHTML={{}}来显示innerHtml从数据库返回的。出于最初的目的，我在此页面上使用getServersideProps()with next-redux-wrapper。

我安装了 dompurify: npm i -S dompurify，当前版本是：“^2.2.6”。

我的代码：

    import DOMPurify from 'dompurify';
    import { useSelector } from 'react-redux';
    import { END } from 'redux-saga';
    import wrapper from '../redux/storeSetup';

    const EmployeePage = () => {
    
        const blog = useSelector(state => state.data);

        const html_body = blog[0].body_html;
    
        const clean = DOMPurify.sanitize(html_body);
    
        return(
           <div className="mainContainer">
                <div dangerouslySetInnerHTML ={{ __html: clean }} />
                <ul>
                    {blog.map((item) => (
                        <li key={item.author}>
                            <span>{item.author}</span><br/>
                            <span>{item.title}</span>
                            <h4>{item.body_delta}</h4>
                            <p>{item.body_html}</p>
                            <p>{item.created_on}</p> …

我有两个名为collection, 的应用程序accounts。这两个应用程序都定义了模型。我正在将模型ReporterProfile从accounts应用程序导入到collection. 同样，Report从应用程序collection到accounts.

Report来自collectionapp的模型在app 中的模型类方法中被调用，accounts如下所示：

from collection.models import Report

class ReporterProfile(models.Model):
    ....

    def published_articles_number(self):
        num = Report.objects.filter(reporterprofile=self.id).count()
        return num

同样，我进口ReporterProfile和User从模型accounts应用到collection这样的应用模式：

from accounts.models import ReporterProfile, User
from <project_name> import settings

class Report(models.Model):
    reporterprofile = models.ForeignKey(ReporterProfile, on_delete=models.CASCADE, verbose_name="Report Author")
    ...

class Comment(models.Model):
    report = models.ForeignKey(Report, on_delete=models.CASCADE, related_name='comments')
    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, verbose_name="Comment by") …

我react-quill仅使用ssr: false. 我的功能组件工作正常，我想将quill-blot-formatter包添加到modules我的鹅毛笔组件的一部分。

我的第一个障碍是，我无法注册它，quill-blot-formatter如图Quill所示：

ServerError
ReferenceError: document is not defined

该页面是客户端呈现的，因此我不明白这个错误来自哪里！

这是我的代码：

import dynamic from "next/dynamic";
import BlotFormatter from "quill-blot-formatter";

const QuillNoSSRWrapper = dynamic(import('react-quill'), {
    ssr: false,
    loading: () => <p>Loading...</p>,
})

Quill.register("modules/blotFormatter", BlotFormatter);

在这里，我不明白如何让它Quill动态导入react-quill。因此，我认为这Quill.register是行不通的。现在，我如何quill-blot-formatter注册react-quill？在使用React-quill 的 Next.js 示例之后，我什至没有像ReactQuill包中的默认导出那样导入 React-quill 。

然后我blotFormatter像这样声明了该模块。

const modules = {
    blotFormatter: {},  // here
    toolbar: [
        [{header: …

我正在调用一个 API 端点，将其数据保存到一个状态，然后渲染它。它显示在浏览器中，但控制台上有警告：Warning: Each child in a list should have a unique "key" prop.。

我的app.js：

class App extends Component {
  render () {
    return (
      <div>
        <Profile profiles={this.state.profile} />
      </div>
   )
  }
  state = {
    profile: []
  };

  componentDidMount() {
    fetch('http://127.0.0.1:8000/profiles')
    .then(res => res.json())
    .then((data) => {
      this.setState({ profile : data })
    })
    .catch(console.log)
  }
}
export default App;

我不明白将key prop放在render() 中的哪里。这是我的片段profile.js：

const Profile = ({ profiles }) => {
  return ( …

我想使用 Django 后端和 React 前端开发一个博客应用程序。我将使用Postgresql。我想使用像Quill这样的富文本编辑器来编写博客文章。我的问题：

1. 我听说用文本编辑器编写的文章需要先转换为 HTML，然后才能保存到数据库中。如果是这样，我该如何在 Django Rest Framework 中执行此操作？
2. 如何在前端呈现数据库中保持相同样式和格式的文章？
3. 比如说，我在文章中包含了多张照片。如何保存数据库中的所有照片？即架构应该是什么？

在我投入之前，我想先弄清楚我的疑虑。

我想调用三个 URL 并从 渲染它们的数据getServerSideProps()，所以我使用axios.all([])如下：

export async function getServerSideProps(ctx) {
    const profileURL = 'http://localhost:8000/api/auth/profile/';
    const bookmarkURL = 'http://localhost:8000/api/blogs/saved/';

    const profileDataReq = axios({method: 'GET',
                            url: profileURL,
                            headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined
                        });
    const bookmarksReq = axios({method: 'GET',
                            url: bookmarkURL,
                            headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined
                        });
    const resp = await axios.all([profileDataReq, bookmarksReq]);
    const data = axios.spread(function(profile, bookmark) {
        console.log('My profile: ', Profile);
        console.log('Saved blogs: ', saved);
    })
    return {
        props: { …