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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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