Я хочу создать что-то подобное внутри моего приложения:
Всякий раз, когда пользователь запрашивает для страницы загрузку важного содержимого в обычном режиме, возьмите код HTML с сервера и покажите их внизу загруженной страницы без какого-либо обновления.
Еще одна вещь, которую я хочу:
Всякий раз, когда пользователь запрашивает страницу, я хочу просто загрузить навигацию и нижний колонтитул, а затем захватить основной код HTML с моего сервера и отобразить их на экране без обновления страницы, и пока это выполняется, я хочу, чтобы tot отображал значок загрузки.
Еще одна вещь, которую я хочу:
На одной из моих страниц есть огромная функциональность, которая использует код javascript, который составляет 80 КБ, и требуется всего 2 секунды для загрузки этого кода. Вероятно, пользователь будет использовать эту функцию после 3 минут с загруженной страницы. (они должны прочитать некоторое содержимое и сделать что-то до этого), есть ли способ загрузить этот код без обновления страницы во время чтения содержимого?
Я уже знаю, как захватить JSON с сервера и отображать их для пользователя, используя реакцию, но я не знаю, как захватить фактический код, такой как HTML или javascript с сервера, используя реакцию.
Я не могу найти какие-либо учебники об этом в теме ответа, должен ли я чему-то научиться? Должен ли я изучать визуализацию на стороне сервера для этого?
Вы можете вернуть строку HTML с сервера и использовать dangerouslySetInnerHTML
чтобы вставить его в свой компонент реакции. здесь приведен пример примера верхнего и нижнего колонтитулов:
import React from 'react';
export default class App extends React.Component {
constructor() {
super();
this.state = {
header: 'loading the header',
footer: 'loading the footer'
}
}
componentWillMount() {
fetch('/api/header-and-footer')
.then(res => {
this.setState({header: res.data.header, footer: res.data.footer})
});
}
render() {
return (
<div>
<div className='my-header' dangerouslySetInnerHTML={{__html: this.state.header}} />
<div className='my-content'>Hello world</div>
<div className='my-footer' dangerouslySetInnerHTML={{__html: this.state.footer}} />
</div>
)
}
}
Тогда все, что вам нужно было бы вернуть с вашего сервера, было бы таким:
{
header: '<div>This is my header content</div>',
footer: '<div>This is my footer content</div>'
}
Вот еще информация об опасномSetInnerHTML:
https://facebook.github.io/react/docs/dom-elements.html
Вы также можете сделать это с помощью рендеринга на стороне сервера, но я думаю, что это слишком сложно для того, что вы хотите сделать с этим. Однако вот некоторые ссылки, если они вам нужны/нужны: