Question

我已经在这里搜索了现有的解决方案，但是似乎没有什么可以回答我的问题，所以这是我的问题。

我已经使用react建立了一个新的Laravel项目，并且刚刚整理了一个基本的Dashboard页面，当前该页面仅用于呈现一个名为PageHeader的组件，其标题为“ Dashboard”。但是，此内容不会填充div。

这是我的设置：

app.js（使用react-router 3.2.0）：

dynamic

组件static：

require('./bootstrap');

import React from 'react';
import { render } from 'react-dom';
import { hashHistory, Router, Route } from 'react-router';

import Dashboard from './components/Dashboard';

render((
    <Router history={hashHistory}>
        <Route path="/home" component={Dashboard} />
    </Router>
    ), document.getElementById('app')
);

组件Dashboard：

import React, { Component } from 'react';
import PageHeader from './../PageHeader';

export default class Dashboard extends Component {

    render() {
        return (
            <div>
                <div>
                    <PageHeader title="Dashboard" />
                </div>
            </div>
        );
    }

}

我的PageHeader文件（我基本上只使用通配符，因为我使用同一刀片文件来呈现所有页面）：

import React, { Component } from 'react';

export default class PageHeader extends Component {
    render() {

        const { title } = this.props;

        return (
            <div className="row">
                <div className="col-sm-12">
                    <h1>{ title }</h1>
                </div>
            </div>
        );
    }
}

呈现主要内容的刀片文件：

web.php

当我加载页面时，它不会引发任何错误，但是Auth::routes(); Route::group(['middleware' => ['auth']], function() { Route::get('/{any}', function () { return view('page'); })->where('any', '.*'); }); div元素始终为空白-我想知道是否是因为页面加载太晚而无法呈现实际内容？

我不确定为什么会这样，因为我最近用相同的组件和模块完成了一个与此非常相似的项目，没有任何问题-因此，如果有人可以对此有所了解，我将不胜感激。

编辑：

如果有帮助，我正在使用webpack mix来转换css / js。

Answer 1

我只是遇到了一个非常类似的问题，挂断与我的反应路由器设置有关。尝试合并您的“菜单html”，使其与您最初的React Router设置在同一渲染调用中。

类似这样的事情。（不是100％肯定在这里，因为我使用的是React Router 4）

require('./bootstrap');

import React from 'react';
import { render } from 'react-dom';
import { hashHistory, Router, Route, Link } from 'react-router';

import Dashboard from './components/Dashboard';

render((
    <Router history={hashHistory}>
        <div>
            <div>
                <Link to='/home'>Dashboard</Link>
            </div>
        </div>
        <Route path="/home" component={Dashboard} />
    </Router>
    ), document.getElementById('app')
);

然后修改您的仪表板，使其仅将props.children加载到该div中

import React, { Component } from 'react';

export default class Dashboard extends Component {

    render() {
        return (
            <div>
                <div>
                    {this.props.children}
                </div>
            </div>
        );
    }

}

再次对不起未能亲自运行该代码，但我不想切换到反应路由器3。最重要的是尝试加载“菜单html代码”以及您的初始反应路由器渲染，并绑定所有子组件以某种方式进入该app.js。如果在那之后您仍然遇到麻烦，请删除您的React Router代码，然后加载一个基本的文本react模块，以解决您的React Router代码。

反应不渲染组件到页面

1 个答案: