Как отобразить реагирующий компонент на любой другой странице, кроме index.html - PullRequest
0 голосов
/ 08 мая 2018

Я создал базовое приложение реакции с

npx create-react-app

. Я могу создавать компоненты в index.js и могу отображать их в элементе в index.html.

* 1007.* Однако это единственная страница, на которой я могу их отобразить, например, я не могу использовать один и тот же компонент на странице login.html или на любой другой странице, кроме index.html

Я тестирую это с помощью npm start.

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

Зачем вам это нужно? Помните, что React, по своей природе, претендует на статус SPA ( Одностраничное приложение ). Этого должно быть достаточно, чтобы вы поняли, что одной страницей является ( должно быть ) index.html.

В любом случае, вы можете сделать это, посмотрев файл index.html по умолчанию, созданный create-реагировать-app, а также файл manifest.json.

Начиная с manifest.json, у вас должен быть этот JSON:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Или как то так. Вы можете выбрать свойство "start_url", которое является отправной точкой, по которой dev-сервер веб-пакета create-реагировать по умолчанию будет служить вам, когда вы запрашиваете ЛЮБОЙ путь по локальному адресу, на котором вы его используете (обычно localhost: 3000 ). Изменяя это свойство, вы можете заставить его обслуживать нужную страницу, например, login.html.

Теперь, глядя на код index.html по умолчанию, вы должны получить что-то вроде этого:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

Как видите, в конце страницы есть

<div id="root"></div>

Именно там React отображает ReactDOM.render (jsx, ElementID) jsx. На самом деле, если вы посмотрите в index.js, ReactDOM будет выглядеть так:

ReactDOM.render(
    <Something />,
, document.getElementByID('root'));

Вы можете видеть, что ElementID ('root') - это идентификатор элемента div, в котором вы хотите отобразить jsx (). Если вы создаете новую страницу, скажем, login.html, копируете и вставляете содержимое index.html и изменяете ID элемента, вы можете выбрать отображение этого содержимого, изменяя также реферальный ElementID в ReactDOM.render (). Работая над этим, вы должны получить желаемый результат, но, как уже было сказано, по моему мнению, вам это не нужно.

0 голосов
/ 08 мая 2018

Обычно React используется для одностраничных приложений, поэтому вы просто отображаете приложение на одной странице, а затем используете маршрутизацию (обычно react-router) для имитации навигации в браузере.

Однако вы можете отобразить его на нескольких страницах ... вам нужно только скопировать JavaScript-код активации на другие страницы

Просто скопируйте это на login.html (взято из вывода по умолчанию create-реакции-приложения):

<noscript>
  You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/bundle.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...