There is such a simple (unnecessary specially cut) component:

import React, { Component } from 'react'; class QueryParamSelect extends Component { render() { return ( <div> {JSON.stringify(this.props)} </div> ) } } export default QueryParamSelect;

I bring it to the back-end framework template as follows:

 %QueryParamSelect{ label: 'Label', options: @options, param: 'rts' }

Which is equivalent to this:

 <queryparamselect label="Label" options="[[&quot;all&quot;, &quot;All&quot;], [&quot;first&quot;, &quot;First&quot;], [&quot;second&quot;, &quot;Second&quot;]]" param="rts"></queryparamselect>

Well, to make this whole thing work, I use it:

 document.addEventListener('DOMContentLoaded', () => { if (document.getElementById('query-param-select')) { ReactDOM.render( <QueryParamSelect/>, document.getElementById('query-param-select') ) } })

As a result, I get {} from this.props .

Looking at the official documentation ( https://reactjs.org/docs/components-and-props.html ) I do not quite understand what the problem is. Can you please explain where and what I did wrong?

  • you pass a component to ReactDom.render , where you don’t get any props , where do you get them from? - ThisMan 2:19
  • @ThisMan thought that you can only describe a tag. How then to describe in ReactDom.render ? I did this: <QueryParamSelect label="" options={[]} param=""></QueryParamSelect> , but ultimately ignores what I wrote in the back-end framework ... - Colibri
  • you're probably not using the backend framework correctly. In any case, it is in ReactDOM.render that the component with props should be transmitted - ThisMan
  • @ThisMan, the idea is this - there is a back-end framework with its templates and other things. Here on one of the pages I want to make a dynamic - add the React component. Accordingly, I registered <queryparamselect (...)></queryparamselect> на строне back-end'а в его шаблоне. Ну и уже в JS файле с помощью <queryparamselect (...)></queryparamselect> на строне back-end'а в его шаблоне. Ну и уже в JS файле с помощью ReactDOM.render` I wanted to "revive" it. I agree that most likely I am doing something wrong, but I do not see how to do it right: ( - Colibri
  • @ThisMan as far as I understand in my code, the following is done - we find the element #query-param-select , delete its contents and insert the <QueryParamSelect label="" options={[]} param=""></QueryParamSelect> component . And apparently you just need to find the element, find and “revive” the React components inside it. (I hope clearly described) - Colibri

1 answer 1

I led all the code to this view and it all worked.

On the side of the back-end framework:

 #query-param-select{ 'data-label': 'Label', 'data-options': @options, 'data-param': 'rts' }

In JS:

 const qps = document.getElementById('query-param-select') ReactDOM.render(<QueryParamSelect label={qps.dataset.label} options={qps.dataset.options} param={qps.dataset.param} />, qps)

In the React component did not touch anything.