Question

我正在我的PHP laravel项目中尝试使用react组件，但该组件未显示它一直显示空白区域，但是我尝试在id ='footercomp'的div块中插入h1标记，但是在其中没有任何作用。我跑

composer laravel/ui react
npm install
npm run dev
php artisan ui react

HTML

<footer class="footer-section">
  <div id='footercomp'>

  </div>
</footer>
<script src="js/app.js" type="text/javascript"></script>

app.js

require('./bootstrap');

require('./components/FooterComp')

FooterComp

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

export default class FooterComp{
    render() {
        return (
            <div className="container-fluid">
                <div className="row">
                    <div className="col-md-6 order-1 order-md-2">
                        <div className="footer-social-links">
                            <a href=""><i className="fa fa-pinterest"></i></a>
                            <a href=""><i className="fa fa-facebook"></i></a>
                            <a href=""><i className="fa fa-twitter"></i></a>
                            <a href=""><i className="fa fa-dribbble"></i></a>
                            <a href=""><i className="fa fa-behance"></i></a>
                            <div className="col-md-6 order-2 order-md-1">
                                <div className="copyright">
                                    Copyright &copy;
                                    <script type="fdd38016b2c0a37d3fefa1a8-text/javascript">
                                        document.write(new Date().getFullYear());
                                    </script>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
} 

export default FooterComp

if (document.getElementById('footercomp')){
    ReactDOM.render(<FooterComp />,document.getElementById('footercomp'));
}

Answer 1

您是否尝试在布局文件中添加 app.js ？

我遇到了同样的问题，发现没有添加 app.js

react-Laravel（7.2）组件未在blade.php中显示

1 个答案: