尝试在 Laravel 视图上使用 React 组件时出错

Question

所以我在 React 和 Laravel 上有这个项目，我正在尝试使用我在 Laravel 刀片上已经拥有的一些 React 组件。当我尝试渲染视图时，组件未渲染，我在控制台上收到此错误：

policies-main.js:67302 Uncaught Error: Target container is not a DOM element.
at Object.render (policies-main.js:67302)
at Module../resources/assets/js/seguros/policies-main.js (policies-main.js:229782)
at __webpack_require__ (policies-main.js:20)
at Object.30 (policies-main.js:232000)
at __webpack_require__ (policies-main.js:20)
at policies-main.js:84
at policies-main.js:87

这是我的 laravel 刀片视图，名为 policies.blade.php：

@extends('agencies.layout.app')

@section('content')
    <p>Hello</p>
    <div id="example">
    </div>
@endsection


@section('scripts')
    <script>
        window.data = {};
        window.data.photo_types = {!! $photo_types !!};
    </script>
    <script src="{{ elixir('assets/agencies/app/loader.js') }}"></script>
    <script async src="{{ elixir('assets/insurance/quote/policies-main.js') }}"></script>

@stop

结果是：“Hello”正在显示，但示例 div 上的内容没有显示。

这是我的政策-main.js

    import React from "react";
import ReactDOM from "react-dom";
import AppPolizas from "./pages/polizas/app-policies";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { applyMiddleware, createStore, compose } from "redux";
import combinedReducers from "./store/reducers/cotizador.reducer";
import { Example } from "./components/polizas/policy-item";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  combinedReducers,
  composeEnhancers(applyMiddleware(thunk))
);
const el = document.getElementById("app");
ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <AppPolizas />
  <Example />

    </BrowserRouter>
  </Provider>,
  el
);

这是我的 policy-item.js：

    import React, { Component } from "react";
import ReactDOM from "react-dom";

class Example extends Component {
  render() {
    return (
      <div>
        <h1>Cool, it's working</h1>
        <p>Hola desde policy-item</p>
      </div>
    );
  }
}

export default Example;

// We only want to try to render our component on pages that have a div with an ID
// of "example"; otherwise, we will see an error in our console
if (document.getElementById("example")) {
  ReactDOM.render(<Example />, document.getElementById("example"));
}

这是我的 app-policies.js：

import React, { Component } from "react";
import "./style.css";

export default class AppPolizas extends Component {
  render() {
    return (
      <div id="site-container">
        <div id="content-container">
        </div>
      </div>
    );
  }
}

现在，我看不出我正在做的事情有什么问题，我仍然是使用 React+Laravel 的新手，有时它有点令人困惑，所以也许我错过了一些东西。

Answer 1

好的，所以我必须改变一些东西才能让它工作，这就是我的代码现在的样子：

policy.js

import React, { useState } from "react";

export const Policy = () => {
<p>Hello</p>
}

policies-main.js

import React from "react";
import ReactDOM from "react-dom";
import { Policy } from "./components/Policy";

const el = document.getElementById("policy");
ReactDOM.render(<Policy />, el);

这是我的观点：

@extends('policies.layout.app')

@section('content')

<div id="policy">
</div>
@endsection

@section('styles')
@endsection

@section('scripts')
    <script async src="{{ elixir('assets/policies-main.js') }}"></script>
@stop

我希望这对和我有同样困难的人有所帮助！