Question

我尝试使用javascript动态包含react组件，即用户可以点击＆＃34; Add Place＆＃34;并将表单添加到页面中。此表单包含使用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

这个例子我选择了材料-ui的文档。

除反应成分外，一切正常。如果我尝试在动态添加的表单之外的其他地方添加react组件包含代码，它将按预期工作。

我在不同的论坛上搜索了关于材料-ui和rails的问题，但找不到解决这个问题的方法。

Answer 1

您应该将状态声明放在构造函数中：

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

Answer 2

最后通过添加手动组件安装代码，即 ReactRailsUJS.mountComponents（），如react-rails gem的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>

Material-UI组件未使用react-rails预渲染进行渲染

2 个答案: