Здравствуйте. Собираю приложение при помощи gulp + browserify + react + jquery.
Допустим, я написал компонент "select" на react, который используется несколько раз на странице с разными свойствами.
Вместо того, чтобы рендерить компонент на каждый div:
React.render(
<Select prop="value1" />,
document.getElementById("select1")
);
React.render(
<Select prop="value2" />,
document.getElementById("select2")
);
...
React.render(
<Select prop="valueN" />,
document.getElementById("selectN")
);
Я решил сделать функию рендеринга в главном файлe main.js приложения:
// подключаем компоненты
var components = {};
var app = {}; // сюда помещаются отрендеренные компоненты, правильно ли так ?
components.Programm= require('./programm');
components.CardComments = require('./card');
components.Select= require('./select');
//функция рендеринга компонентов на странице, свойства берутся из атрибутов data-*
function initComponents() {
var components_wrap = document.getElementsByClassName("js-component");
Array.prototype.forEach.call(components_wrap, function(element) {
var c = element.getAttribute("component");
var data = element.dataset;
var component = components[c];
app[c] = React.render(React.createElement(component,data),element);
});
}
// по готовности документа рендерим
$(function() {
initComponents();
});
Теперь, чтобы компонент появился на странице, мы в HTML пишем:
<div class="js-component" component="Select" data-prop="значение свойства 1 "></div>
<div class="js-component" component="Programm" data-id="123"></div>
Все это, чтобы я мог просто в шаблоне указывать компонент с параметрами, без постоянного переписывания JS файлов.
Но свойства уже приходят со строковым типом из атрибута даты. Как лучше строить приложение в этом случае? Может что-то я упустил, пытался найти как это реализовывают, но не получилось. Буду благодарен за советы и помощь.
Средний
