0

Имеется такой простой (лишнее специально вырезал) компонент:

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="[[&quot;all&quot;, &quot;All&quot;], [&quot;first&quot;, &quot;First&quot;], [&quot;second&quot;, &quot;Second&quot;]]" 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) я не совсем понимаю в чем проблема. Можете, пожалуйста, объяснить где и что я сделал не так?

7
  • вы в ReactDom.render передаете компонент, куда не прокидываете ни какие props, откуда же им взяться?
    – ThisMan
    6 ноя 2018 в 14:19
  • @ThisMan думал что можно описывать только тег. А как тогда описать в ReactDom.render? Сделал так: <QueryParamSelect label="" options={[]} param=""></QueryParamSelect>, но в итоге игнорируется то, что прописывал в шаблоне back-end фреймворка...
    – Colibri
    6 ноя 2018 в 14:37
  • вы скорее всего не правильно используете бэкенд фреймворк. В любом случае, именно в ReactDOM.render должен передаваться компонент с пропсами
    – ThisMan
    6 ноя 2018 в 14:39
  • @ThisMan смотрите, идея такая - есть back-end фреймворк со своими шаблонами и прочим. Вот на одной из страниц хочу сделать динамику - добавить компонент React. Соответственно, прописал <queryparamselect (...)></queryparamselect> на строне back-end'а в его шаблоне. Ну и уже в JS файле с помощью ReactDOM.render` хотел его "оживить". Согласен что скорее всего делаю что-то не так, но не вижу как сделать правильно :(
    – Colibri
    6 ноя 2018 в 14:41
  • @ThisMan насколько я понимаю в моем коде выше делается следующее - находим элемент #query-param-select, удаляем его содержимое и вставляем внутрь него <QueryParamSelect label="" options={[]} param=""></QueryParamSelect> компонент. А нужно судя по всему просто найти элемент, найти и "оживить" React компоненты внутри него. (Надеюсь понятно описал)
    – Colibri
    6 ноя 2018 в 14:45

1 ответ 1

0

Весь код я привел к такому виду и все заработало.

На стороне back-end фреймворка:

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

В JS:

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

В React компоненте ничего не трогал.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.