Question

使用Meteor和React构建Web应用程序，我正在尝试在React中呈现两个视图，并且索引组件将不会呈现...不确定原因。 'Two'组件可以。这是我的routes.jsx：

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

import { Index } from '../../ui/components/index.jsx';
import { Two } from '../../ui/pages/two.jsx';

Meteor.startup( () => {
  render( 
    <Router history={ browserHistory }>
       <Route path="/" component={ Index } />
       <Route path="/two" component={ Two } />
    </Router>, 
    document.getElementById( 'react-root' ) 
  );
});

Index.jsx：

import React, { Component } from 'react';

export default class Index extends Component {
    render() {
        return(
        <Index className="container">
            <header>
                <h1>Todo List</h1>
            </header>
        </Index>
        ); 
    }
}

Two.jsx：

import React from 'react';

export const Two = () => <h3>Two</h3>;

发生了什么事？任何帮助赞赏！

Answer 1

您不应该在Index组件中呈现Index。

此

$pdf->Output("{$filename}.pdf", 'D');

应该是

import React, { Component } from 'react';

export default class Index extends Component {
    render() {
        return(
        <Index className="container">
            <header>
                <h1>Todo List</h1>
            </header>
        </Index>
        ); 
    }
}

此外，在导出import React, { Component } from 'react'; export default class Index extends Component { render() { return( <div className="container"> <header> <h1>Todo List</h1> </header> </div> ); } }作为默认导出时，您应该使用

Index

或

import Index from '../../ui/components/index.jsx';

而不是使用显式命名导出import {default as Index} from "../../ui/components/index.jsx"

组件无法使用ReactJS和React Router呈现？

1 个答案: