Компонент Material-UI не отображается с предварительным рендерингом рельсов

Question

Я пытаюсь включить компонент реакции динамически, используя javascript, т. Е. Пользователь может нажать «Добавить место», и на страницу добавляется форма. Эта форма содержит компонент реагирования, который использует компонент автозаполнения material-ui.

Ниже приведен код для формы, которая добавляется динамически при нажатии кнопки:

<div class="grid-x grid-margin-x grid-margin-y grid-padding-x grid-padding-y align-center">          
  <div class="cell medium-6">
        <div class="field">
          <%= f.label :activity_place %><br/>
          <%= react_component("PlaceSearch", {}, {prerender: true}) %>
        </div>
    </div>
    <div class="cell medium-6">
        <div class="field">
          <%= f.label :activity_time %><br/>
          <%= f.select(:activity_time, Constants::ACTIVITY_TIMES) %>
        </div>
    </div>
</div>

Ниже приведен код для компонента (исключая импорт):

class PlaceSearch extends React.Component {
    state = {
    checked: false,
    dataSource: [
      {
        text: 'text-value1',
        value: (
          <MenuItem
            primaryText="text-value1"
            secondaryText="&#9786;"
          />
        ),
      },
      {
        text: 'text-value2',
        value: (
          <MenuItem
            primaryText="text-value2"
            secondaryText="&#9786;"
          />
        ),
      },
    ]
  }


  render () {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme({userAgent: (typeof navigator !== 'undefined' && navigator.userAgent) || 'all' })}>
        <div>
          <AutoComplete
            hintText="text-value data"
            filter={AutoComplete.noFilter}
            dataSource={this.state.dataSource}
          />
        </div>
      </MuiThemeProvider>
    );
  }
}

export default PlaceSearch

Этот пример я выбрал из документации по материалам.

Все работает нормально, как и ожидалось, кроме компонента реакции. Если я попытаюсь добавить код включения реагирующего компонента где-то еще, кроме формы, добавляемой динамически, это работает, как и ожидалось.

Я искал разные форумы, касающиеся Material-UI и Rails, но не смог найти решение этой конкретной проблемы.

Answer 1

Наконец-то все заработало, добавив код монтирования компонентов вручную, т. Е. ReactRailsUJS.mountComponents () , как упомянуто в github doc драгоценного камня рельсов-реакторов. Не вносил изменений в файл компонента JS, а только в форму, в которую он был включен. Рабочий код ниже:

<div class="grid-x grid-margin-x grid-margin-y grid-padding-x grid-padding-y align-center">          
  <div class="cell medium-6">
        <div class="field">
          <%= f.label :activity_place %><br/>
          <%= react_component("PlaceSearch", {}, {prerender: true}) %>
        </div>
    </div>
    <div class="cell medium-6">
        <div class="field">
          <%= f.label :activity_time %><br/>
          <%= f.select(:activity_time, Constants::ACTIVITY_TIMES, include_blank: true) %>
        </div>
    </div>
</div>
<script>
    ReactRailsUJS.mountComponents()
</script>

Answer 2

Вы должны поместить декларацию своего состояния в конструктор:

class PlaceSearch extends React.Component {
    constructor() {
        super();
        this.state = {
        checked: false,
        dataSource: [
           {
               text: 'text-value1',
               value: (
                   <MenuItem
                    primaryText="text-value1"
                    secondaryText="&#9786;"
                   />
               ),
           },
           {
               text: 'text-value2',
               value: (
                   <MenuItem
                    primaryText="text-value2"
                    secondaryText="&#9786;"
                   />
               ),
            }]   
         }
     }


  render () {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme({userAgent: (typeof navigator !== 'undefined' && navigator.userAgent) || 'all' })}>
        <div>
          <AutoComplete
            hintText="text-value data"
            filter={AutoComplete.noFilter}
            dataSource={this.state.dataSource}
          />
        </div>
      </MuiThemeProvider>
    );   } }

export default PlaceSearch

Если это работает для вас, вот почему: SO Post