Как создать компоненты Inject React из XML
Представьте, что вы создали веб-фреймворк, который помогает вам быстро создавать блоги для клиентов. Ради этого поста, каждый раз это один и тот же шаблон блога, что меняется в его содержании. Приложение You React представляет собой простую структуру из следующего [где состояние содержимого просто меняется каждый раз]
<App>
<Navigation/>
<Content/>
</App>
Что делает фреймворк, так это то, что у вас есть файлы XML, содержащие HTML. Каждый XML-файл представляет собой одно сообщение в блоге. Приложение извлекает весь HTML из файлов XML и помещает его в состояние приложения в массиве «сообщений в блоге». В зависимости от состояния приложения конкретная запись в массиве будет отображаться в Content ...
В состоянии содержимого есть поле под названием «html», в котором содержится HTML-код для вставки в строковой форме. [вы должны использовать опасноSetInnerHTML]
Эта концепция отлично работает, и теперь у меня есть ее версия. Однако представьте, что у вас есть компоненты React, которые вы хотите добавить в каждое сообщение в блоге. Допустим, вы хотите добавить компонент в конкретное сообщение в блоге в определенном разделе. Вы хотите добавить к нему реквизит и тому подобное. Теперь это выходит из окна с опасноSetInnerHTML
Вот где я застрял, пытаясь найти лучшее направление. Единственная мысль, которая у меня возникла сейчас, следующая:
Since you would now be writing JSX in the XML, just make each blog post its own component. You would have ...etc and then if this.state.currentPost === 1 then display BlogPost1 and likewise. Yet you would have to have a huge block of if-statements depending on how many blogposts you have, and its not ideal to have to add everytime you have a new blogpost
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Когда я прочитал заголовок вашего вопроса, мне стало любопытно, и я обнаружил, что эта библиотека для синтаксического анализа XML на компоненты React: xml-реагировать. Но вы просите не об этом.
Если вы хотите использовать компоненты в середине строки HTML, я предлагаю: замечательно реагировать. Этот компонент компилирует свои дочерние элементы (строку с markdown / html / react) в узлы реакции.
Пример из его документов:
var React = require('react');
var Markdown = require('react-remarkable');
var MyComponent = React.createClass({
render() {
return (
<div>
{/* Pass Markdown source to the `source` prop */}
<Markdown source = "**Markdown is awesome!**" />
{/* Or pass it as children */}
{/* You can nest React components, too */}
<Markdown>{`
## Reasons React is great
1. Server-side rendering
2. This totally works:
<SomeOtherAmazingComponent />
Pretty neat!
`}</Markdown>
</div>
);
}
});