Material-UI组件未使用react-rails prerender渲染

Question

I'm trying to include a react component dynamically using javascript ie a user can click "Add Place" and a form gets added to the page. This form contains a react component that uses material-ui's auto-complete component.

Below is the code for the form that gets added dynamically when button's clicked:

<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>

Below is the code for the Component (excluding imports):

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

This example I've picked from material-ui's docs.

Everything works fine as expected except the react component. If I try to add the react component inclusion code somewhere else apart from the form being added dynamically, it works as expected.

I've searched different forums regarding material-ui and rails but could not find the solution to this particular problem.

Answer 1

You should put your state declaration inside a constructor:

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

If this works for you, this is why: SO Post

Answer 2

Finally made it working by adding manual component mounting code ie ReactRailsUJS.mountComponents() as mentioned in the github doc of the react-rails gem. Did no changes to the component JS file but only to the form that included it. The working code is below:

<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>