Как я могу получить HTML или Javascript код с помощью реакции с моего сервера?

Question

Как я могу получить HTML или Javascript код с помощью реакции с моего сервера?

-3

Я хочу создать что-то подобное внутри моего приложения:

Всякий раз, когда пользователь запрашивает для страницы загрузку важного содержимого в обычном режиме, возьмите код HTML с сервера и покажите их внизу загруженной страницы без какого-либо обновления.

Еще одна вещь, которую я хочу:

Всякий раз, когда пользователь запрашивает страницу, я хочу просто загрузить навигацию и нижний колонтитул, а затем захватить основной код HTML с моего сервера и отобразить их на экране без обновления страницы, и пока это выполняется, я хочу, чтобы tot отображал значок загрузки.

Еще одна вещь, которую я хочу:

На одной из моих страниц есть огромная функциональность, которая использует код javascript, который составляет 80 КБ, и требуется всего 2 секунды для загрузки этого кода. Вероятно, пользователь будет использовать эту функцию после 3 минут с загруженной страницы. (они должны прочитать некоторое содержимое и сделать что-то до этого), есть ли способ загрузить этот код без обновления страницы во время чтения содержимого?

Я уже знаю, как захватить JSON с сервера и отображать их для пользователя, используя реакцию, но я не знаю, как захватить фактический код, такой как HTML или javascript с сервера, используя реакцию.

Я не могу найти какие-либо учебники об этом в теме ответа, должен ли я чему-то научиться? Должен ли я изучать визуализацию на стороне сервера для этого?

Joseph 10 авг. 2017, в 07:53

Источник

Теги:

javascript

reactjs

ajax

node.js

redux

1 ответ

Ещё вопросы

Showard180 · Answer 1 · 2017-08-11T12-47-00.000Z

Вы можете вернуть строку 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

Вы также можете сделать это с помощью рендеринга на стороне сервера, но я думаю, что это слишком сложно для того, что вы хотите сделать с этим. Однако вот некоторые ссылки, если они вам нужны/нужны:

https://facebook.github.io/react/docs/react-dom-server.html

http://redux.js.org/docs/recipes/ServerRendering.html