Question

您能否帮我创建我的投资组合的详细信息页面。这是我的App文件，包含我的路线：

import React from 'react';
import {
  BrowserRouter,
  Route,
  Router,
  Switch
} from 'react-router-dom';

import Header from './Header';

import Home from './Home';

import About from './About';

import Teachers from './Teachers';

import Courses from './Courses';

import NotFound from './NotFound';

import Featured from './Featured';

import Portfolio from './Portfolio';

import Details from './Details';

import TeacherList from '../data/teachers';


const App = (props) => (

  <BrowserRouter>

    <div className="container">
      <Header />      
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" render={ () => <About title='About' /> } />
        <Route exact path="/teachers" component={Teachers} />
        <Route path="/teachers/:topic/:name" component={Featured} />
        <Route path="/courses" component={Courses} />
        <Route exact path="/portfolio"  render={ (props) => <Portfolio title={TeacherList} {...props}/>} />
        <Route path="/portfolio/:id" component={Details} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </BrowserRouter>
);

export default App;

这是我的portfolio.js文件

import React from 'react';
import { NavLink } from 'react-router-dom';

  const Portfolio = (props) => {

    let TeacherList =  props.title;
    let teachers = TeacherList.map((teacher) => {
      return (
        <li className="teacher" key={teacher.id} >
          <img className="teacher-img" src={teacher.img_src} alt="teacher" />
          <NavLink to={`\portfolio/${teacher.id}`}> <h3>{teacher.name}</h3></NavLink>  
        </li>
      );
    }); 

    return (
      <div className="main-content">
        <h2>Portfolio</h2>
        <ul className="group">
          {teachers}    
        </ul>
      </div>
    );
  }

  export default Portfolio;

这是我的详细信息页面

import React from 'react';

const Details = (props) => (

  <div className="main-content">

    <h2>Details Page</h2>

  </div>
);

export default Details;

我希望在老师的名字上找到关于老师的一些信息。例如，展示生物。

数据来自此文件：

const TeacherList = [

  {
    name: "Angie McAngular",
    bio: "Angie is a web developer and teacher who is passionate about building scalable, data driven web apps, especially ones that address old problems with new tech!",
    img_src: "#",
    id: "teach-1"
  },
  {
    name: "NodeStradamus",
    bio: "'NodeStra' is a software engineer and philosopher trying to leave the world better than he found it. He codes for non-profits, eCommerce, and large-scale web apps.",
    img_src: "#",
    id: "teach-2"
  },
  {
    name: "Geo 'Lo' Cation",
    bio: "Geo is a JavaScript developer working on large-scale applications. He's also a teacher who strives to support students in removing all barriers to learning code.",
    img_src: "#",
    id: "teach-3"
  },
  {
    name: "Ecma Scriptnstuff",
    bio: "Ecma found her passion for computers and programming over 15 years ago. She is excited to introduce people to the wonderful world of JavaScript.",
    img_src: "#",
    id: "teach-4"
  },
  {
    name: "Jay Query",
    bio: "Jay is a developer, author of CSS: The Missing Manual, JavaScript & jQuery: The Missing Manual, and web development teacher.",
    img_src: "#",
    id: "teach-5"
  },
  {
    name: "Json Babel",
    bio: "All of his professional life, Json has worked with computers online; he is a polyglot programmer and likes using the right tools for the job.",
    img_src: "#",
    id: "teach-6"
  }
];

export default TeacherList;

Answer 1

在Details.js中，您需要抓取teacher_id，然后使用该ID来查询您的数据。

export default class Details extends Component {
    componentDidMount() {
        getTeacherById(this.props.match.params.id)
            .then( response => {
                this.setState( prevState => { details: response.data })
        });
    }
    render() {
        return (
            <div className="main-content">
                <h2>Details Page</h2>
                <p>{this.state.details.name}</p>
                <p>{this.state.details.bio}</p>
                <img src={this.state.details.img_src} />
            </div>
        )
    }
}

在此示例中，您必须创建使用id查找正确数据的getTeacherById函数。

反应路线dom

1 个答案: