Генерация JSX для рендеринга внешнего компонента

Question

Я чрезвычайно новичок в React, на самом деле, я на лекции 23 из 247 для удэми и изучения состояний и событий.У меня возникают проблемы с поиском ответа на этот вопрос.

Мы решили в нашей компании использовать реагировать, и до сих пор это оказалось очень хорошим.Я не решаюсь задать этот вопрос, потому что мы до сих пор не достигли этого, но это бизнес-требование, что у нас есть JSX-экстентал, так как у нас есть логика AUTHENTICATON, которая должна произойти, и если ее невозможно достичь, мы тратим время впустую.

Мой вопрос: возможно ли получить JSX извне из API и отобразить его внутри Компонента.

Например,

// external API возвращает JSX через AJAX-запрос

<div id="app">
  <SomeComponent/>
  <SomeComponent/>
  <SomeComponent/>
</div>

// реагирующий компонент

class Baz extends Component {
   render(){
      // fetch JSX from external source through AJAX Request
   }
}

Что я действительно хотел бы увидеть, так это реализацию, использующую AJAX и метод рендеринга из компонента класса.

Answer 1

Если вы можете заменить jsx на html на стороне сервера, вы можете использовать свойство опасно SetInnerHTML.

Вы можете использовать его следующим образом.

const Page = (html) => {
    return (
        <div dangerouslySetInnerHTML={__html:html}>
        </div>
    )
}

Его использование не рекомендуется,потому что пользователи могут внедрить вредоносный код на страницу таким образом, если вы используете его при вводе данных пользователем без санитарии.Но из ответа API это не проблема, я думаю.

Answer 2

Нет, вы не можете и не должны пытаться передавать JSX-представление вашего пользовательского интерфейса по проводам.Причина проста: JSX - это не формат data, а расширенный набор Javascript, переданный в JS перед оценкой.Это означает, что для этого вы должны передать JS, а затем проверить его.То, что вы могли бы сделать, это передать сериализованные сущности через сеть, а затем отобразить их на клиенте, используя React.Component, созданный для конкретной сущности.В JS нет стандартизированного способа сделать это (JSON - это только частичное представление объектов JS).

Предположим, у вас есть какой-то механизм, который может выводить "JSX", что он будет выводить на самом деле и как будетэто материализуется в вашем коде

Предположим, что есть компонент Page, отображающий это как:

const Page = (JSX) => {
    return (
        <div>
            {JSX}
        </div>
    )
}

Где JSX - это значение , которое вы получили через API, и этозначение в качестве примера:

<div id="app">
  <SomeComponent/>
  <SomeComponent/>
  <SomeComponent/>
</div>

Этот "JSX" переносится на вызовы к React.createElement(type, props), так что на самом деле это объекты JS.Те объекты, которые должны быть построены, должны иметь доступ к значению type, которое может быть string в случае обычного элемента div, но, скорее всего, будет классами или функциями в случае произвольно сгенерированных компонентов (SomeComponent),Итак, ваша логика рендеринга должна иметь доступ к этим классам или функциям, оценивать их и затем использовать их в качестве аргумента для React.createElement.По сути, вы лениво загружаете свои компоненты.

React (своего рода) построен на идее составных примитивов представления (Компоненты), используемых для отображения данных.На практике это означает, что ваше приложение будет определять некоторое (потенциально большое) возможное представление ваших данных и создавать их способом компоновки (реагировать на компоненты).Затем, учитывая данные, созданные вашими пользователями / приложениями / чем-либо еще, он будет использовать эти примитивы и их возможности, чтобы сделать ваши данные доступными для ваших пользователей.