Частичный контент Paywall в React
В настоящее время я работаю над компонентом, который получает данные своего основного содержимого от внешний API.
Данные представлены в виде строки с содержимым html, поэтому я использую dangerouslySetInnerHTML для визуализации содержимого.
{ ....
content: "<div id = "attachment_565754" class = "wp-caption alignnone"> <img class = "size-large wp-image-565754"...../>"
......
}
<div className = "col col-sm-12 col-md-12 col-lg-12"dangerouslySetInnerHTML {{__html: this.props.postDetails.content}}>
</div>
Требуется частично скрыть контент после того, как пользователь посетил сайт 5 раз. В настоящее время я использую местное хранилище для отслеживания посещений пользователей, как временное решение для этой части.
Но как мне частично заблокировать контент, когда весь контент поступает из внешнего api.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В идеале вы бы даже не загружали его, если он вам не нужен. Затем, независимо от того, загрузили вы его или нет, используйте некоторые локальные переменные, чтобы определить, должен ли он отображаться:
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
const shouldLoad = this.shouldLoad(); // Would return true/false based on localStorage value
if (shouldLoad) {
someDataCall().then((data) => {
this.setState({ data });
});
}
}
render() {
const data = this.state.data;
return (
<div>
{data &&
<div
className = "col col-sm-12 col-md-12 col-lg-12"
dangerouslySetInnerHTML = {{__html: this.props.postDetails.content}}>
</div>
}
</div>
);
}
При этом div с данными в нем отображается только в том случае, если данные были загружены, и данные будут загружаться только в том случае, если ваши значения localStorage говорят, что это должно быть.
Вы хотите разделить контент, который вы визуализируете с помощью dangerouslySetInnerHTML, и скрыть его половину? Это потребует некоторого взлома за пределами React, потому что мы не можем контролировать контент после его передачи dangerouslySetInnerHTML.
Хотя вы можете изменить то, что помещается в data, когда вы получаете ответ от сетевого вызова, хотя это потребует от вас синтаксического анализа HTML. Похоже, у вас должен быть способ сообщить API, какие данные вам нужны.
Но я все же хочу показать контент, например, если пользователь посетил сайт в 6-й раз, но только частично. Как вы видите на сайтах, посвященных журналистике, они показывают только первый абзац, а остальные размывают.