Question

我有一个使用React通过Webpacker的Rails 5.1应用程序，我有其他组件正常工作，但我正在尝试的最后一个没有显示在页面中。我没有错误，Firefox中的react-dev-tools也没有检测到React应用程序。

我加倍检查我是否错过了导入或导出，但在那里看不到错误。

应用/ JavaScript的/包/ roastsapi.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import RoastFeed from 'RoastFeed'

document.addEventListener('turbolinks:load', function () {
  var element = document.getElementById("roast-feed-component");
  ReactDOM.render(<RoastFeed />, element);
});

应用/ JavaScript的/ RoastFeed / index.jsx

import React from 'react'

class RoastFeed extends React.Component {
  // State:
  // { loading: true }
  // { loading: false, planet: { name, climate, terrain } }
  // { loading: false, error: any }
  state = { loading: true };

  componentDidMount() {
    fetch("https://swapi.co/api/planets/5")
      .then(res => res.json())
      .then(
        planet => this.setState({ loading: false, planet }),
        error => this.setState({ loading: false, error })
      );
  }

  renderLoading() {
    return <div>Loading...</div>;
  }

  renderError() {
    return <div>I'm sorry! Please try again.</div>;
  }

  renderPlanet() {
    const { name, climate, terrain } = this.state.planet;
    return (
      <div>
        <h2>{name}</h2>
        <div>Climate: {climate}</div>
        <div>Terrain: {terrain}</div>
      </div>
    );
  }

  render() {
    if (this.state.loading) {
      return this.renderLoading();
    } else if (this.state.planet) {
      return this.renderPlanet();
    } else {
      return this.renderError();
    }
  }
}

export default RoastFeed

应用/视图/烤肉/ index.html.erb

//...
<div id="roast-feed-component"></div>
//...

Answer 1

您的Webpacker未配置为支持jsx文件。在扩展名为webpacker.yml的文件中，添加- .jsx

使用Webpacker的Rails 5.1 App中没有显示React Component

1 个答案: