Question

为了引导您完成我的文件布局，我有一个app.js

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './routers/AppRouter';
import 'normalize.css/normalize.css';
import './styles/styles.scss';

ReactDOM.render(<AppRouter />,document.getElementById('app'));

呈现AppRouter.js：

//Importing Libraries
import React from 'react';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';

//Importing Pages
import HomePage from '../pages/HomePage';
import F from '../pages/F';
import F from '../pages/Fe';
import F from '../pages/F';
import F from '../pages/F';
import FAQPage from '../pages/FAQPage';
import AboutUsPage from '../pages/AboutUsPage'
import ContactPage from '../pages/ContactPage';
import FranchisePage from '../pages/FranchisePage';
import GiftPage from '../pages/GiftPage';
import NotFoundPage from '../pages/NotFoundPage';

//Importing Components
import Header from '../components/Header';
import Footer from '../components/Footer';


//Router configuration
/*switch is going to look through the route paths in order until it finds a match */
const AppRouter = () => (
    <BrowserRouter>
    <div>
        <Header />
        <Switch>
            <Route path="/" component={HomePage} exact={true}/>
            <Route path="/F" component={F} exact={true}/>
            <Route path="/F" component={F} exact={true}/>
            <Route path="/birthday" component={F} exact={true}/>
            <Route path="/F" component={F} exact={true}/>
            <Route path="/faq" component={FAQPage} exact={true}/>
            <Route path="/about-us" component={AboutUsPage} exact={true}/>
            <Route path="/contact" component={ContactPage} exact={true}/>
            <Route path="/franchise" component={FranchisePage} exact={true}/>
            <Route path="/gift" component={GiftPage} exact={true}/>
            <Route component={NotFoundPage}/>
        </Switch>
        <Footer/>
    </div>
    </BrowserRouter>
);

export default AppRouter;

（出于员工隐私原因，某些名称已更改为f）

当我点击它们时，只是文本组件的页面才会正常呈现，例如关于我们页面：

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';

const AboutUsPage = () => (
    <div>
        Content For AboutUsPage
    </div>
);

export default AboutUsPage;

但是当我想在这些页面上渲染一个组件时，没有任何东西显示出来（整个页面都是空白的）

这是我正在尝试做的事情：

这是FAQ页面

import React from 'react';
import ReactDOM from 'react-dom';
import FAQInfo from './FAQRevealnfo';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';

const FAQPage = () => (
    <div id>
        <h1>FREQUENTLY ASKED QUESTIONS</h1>
        //trying to render FAQInfo
        <FAQInfo
        question="Question"
        answer="answer"
        >
        </FAQInfo>
    </div>
);

export default FAQPage;

这里是我试图在其中呈现的组件：

import React from 'react';

export default class FAQRevealInfo extends React.Component {
    constructor(props) {
        super(props);
        this.toggle = this.toggle.bind(this);
        this.state = {
            visibility: false
        };
        this.question = this.question.bind(this);
        this.answer = this.answer.bind(this);
    }
    toggle (){
        this.setState((prevState) => {
            return {
                visibility: !prevState.visibility
            };
        });
    }
    render(){
        return (
            <div>
                <h1>{this.question}</h1>
                <button onClick = {this.toggle}>
                
                </button>
                 <div>
                    <p>{this.state.visibility&&this.answer}</p>
                 </div>
            </div>
        );  
    }
}

Answer 1

我已将构造函数更改为this.question =“text”和this.answer =“text”并使用this.props进行渲染，现在可以正常工作。

嵌套组件不会渲染

1 个答案: