React嵌套组件无法渲染问题求助

Let’s walk through the key issues causing your blank page—these are all common gotchas that throw silent (or not-so-silent) errors under the hood:

1. Component Import & Naming Mismatch #

In your FAQPage.js, there are two critical spelling mistakes breaking the component import:

• The filename is misspelled: FAQRevealnfo → should be FAQRevealInfo (you missed an "a")
• While you imported the component as FAQInfo, the default export is FAQRevealInfo—consistent naming avoids confusion.

Fixed import in FAQPage.js:

import React from 'react';
import FAQRevealInfo from './FAQRevealInfo'; // Corrected filename and component reference

// Remove unused react-router-dom import—you don't need it here!
// import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';

const FAQPage = () => (
  <div id="faq-page"> {/* Fixed empty id attribute */}
    <h1>FREQUENTLY ASKED QUESTIONS</h1>
    <FAQRevealInfo question="My First Question?" answer="Here's the answer!" />
  </div>
);

export default FAQPage;

2. Incorrect Prop Access in FAQRevealInfo #

You tried to reference this.question and this.answer as bound methods, but:

• You never implemented those methods
• You actually need to access the props passed from the parent component (this.props.question and this.props.answer)

This mistake throws an immediate error, stopping React from rendering the component tree entirely.

Fixed FAQRevealInfo.js:

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 };

    // Remove unused bindings—you don't need these!
    // this.question = this.question.bind(this);
    // this.answer = this.answer.bind(this);
  }

  toggle() {
    this.setState((prevState) => ({
      visibility: !prevState.visibility
    }));
  }

  render() {
    return (
      <div>
        {/* Access props directly instead of non-existent methods */}
        <h3>{this.props.question}</h3>
        <button onClick={this.toggle}>
          {/* Add meaningful button text for usability */}
          {this.state.visibility ? 'Hide Answer' : 'Show Answer'}
        </button>
        <div>
          {this.state.visibility && <p>{this.props.answer}</p>}
        </div>
      </div>
    );
  }
}

3. Minor Cleanup Notes #

• Remove unused imports (like react-router-dom in FAQPage.js) to keep your code lean
• Avoid empty DOM attributes (like <div id>) to prevent unnecessary warnings
• Use semantic heading levels (h3 for questions instead of h1) for better accessibility

Fixing these issues will resolve the blank page and let your nested component render as expected!

内容的提问来源于stack exchange，提问作者Alex Barbulescu