Имеется такой простой (лишнее специально вырезал) компонент:
import React, { Component } from 'react';
class QueryParamSelect extends Component {
render() {
return (
<div>
{JSON.stringify(this.props)}
</div>
)
}
}
export default QueryParamSelect;
Вывожу его в шаблон back-end фреймворка следующим образом:
%QueryParamSelect{ label: 'Label', options: @options, param: 'rts' }
Что в итоге эквивалентно этому:
<queryparamselect label="Label" options="[["all", "All"], ["first", "First"], ["second", "Second"]]" param="rts"></queryparamselect>
Ну и чтобы все это дело заработало использую это:
document.addEventListener('DOMContentLoaded', () => {
if (document.getElementById('query-param-select')) {
ReactDOM.render(
<QueryParamSelect/>,
document.getElementById('query-param-select')
)
}
})
В итоге я получаю {}
от this.props
.
Глядя на официальную документацию (https://reactjs.org/docs/components-and-props.html) я не совсем понимаю в чем проблема. Можете, пожалуйста, объяснить где и что я сделал не так?
ReactDom.render
передаете компонент, куда не прокидываете ни какиеprops
, откуда же им взяться?ReactDom.render
? Сделал так:<QueryParamSelect label="" options={[]} param=""></QueryParamSelect>
, но в итоге игнорируется то, что прописывал в шаблоне back-end фреймворка...ReactDOM.render
должен передаваться компонент с пропсами<queryparamselect (...)></queryparamselect> на строне back-end'а в его шаблоне. Ну и уже в JS файле с помощью
ReactDOM.render` хотел его "оживить". Согласен что скорее всего делаю что-то не так, но не вижу как сделать правильно :(#query-param-select
, удаляем его содержимое и вставляем внутрь него<QueryParamSelect label="" options={[]} param=""></QueryParamSelect>
компонент. А нужно судя по всему просто найти элемент, найти и "оживить" React компоненты внутри него. (Надеюсь понятно описал)