Недавно я решил погрузиться в JavaScript и ReactJS, чтобы начать создавать одностраничное приложение.
Я создал серверную часть для своего проекта с django rest Framework и планирую использовать графический интерфейс django-admin в качестве моей CMS.
Вот моя модель Django для одного из API:
class Project(models.Model):
title = models.CharField(max_length=200)
description = models.TextField()
image = models.ImageField(upload_to = 'images/')
body = models.TextField()
time = models.DateTimeField()
author = models.ForeignKey(
'auth.user',
on_delete=models.CASCADE,
)
def __str__(self):
return self.title
Я вполне могу использовать этот контент, реагируя с помощью axios, и это позволяет мне минимально отформатировать структуру. Например:
class Projects extends React.Component {
state = {
home: []
};
componentDidMount() {
this.getHome();
}
getHome() {
axios
.get('http://192.168.1.19:8000/api/projects/')
.then(res => {
this.setState({home: res.data});
})
.catch(err => {
console.log(err);
});
}
render() {
return(
<div class="posts">
{this.state.home.map(item => (
<div key={item.id}>
<img src={} alt="placeholder" />
<h1>{item.title}</h1>
<h5>{item.description}</h5>
<br />
<p>{item.body}</p>
<br />
<p>Posted at: {item.time}</p>
<br />
</div>
))}
</div>
);
}
}
На данный момент это очень простой макет, представляющий данные, которые можно прочитать из API.
Мне нужно иметь возможность форматировать содержимое в {item.body}
. В настоящее время я использую TinyMCE для создания разметки в CMS django-admin.
Пример того, что я получаю, передавая данные через API:
<h1>Hello World!</h1><br /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p><br /><p>Lorem ipsum dolor sit amet, consectetur</p>
Все это упаковано в строку в запросе json, что нормально, но приложение реагирования просто отображает необработанную строку.
Я хочу сделать это без dangerouslySetInnerHTML
, так как этот метод, по-видимому, является проблемой безопасности, за исключением произвольного кода.
И сервер django, и сервер реакции будут работать на одной и той же машине, но я хочу, чтобы риски были минимальными.
Очень ценю любые идеи на этот счет, я все еще новичок в веб-разработке.