Question

我有两个组成部分

import React,{Component} from 'react';

class CourseSales extends Component {
  render(){
    var courses = this.props.items.map((item,i) => {
      return <Course name={item.name} price={item.price} key={i} />
    });
    return(
      <div>
          Purchase your course Here
          {courses}
      </div>
    );
  }
}

class Course extends Component {
  render(){
    console.log(this.porps);
    return(
      <div>
      </div>
    );
  }
}

export default CourseSales;

我无法在我的“课程组件”控制台中使用名称，价格道具，显示未定义我的课程组件console.log显示未定义而我的主要应用程序组件代码是

    import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import CourseSales from './CourseSales';

class App extends Component {
  render() {
    var courses = [
      {'name':'design','price':2000},
      {'name':'backend','price':8000},
      {'name':'marketing','price':4000},
      {'name':'graphic design','price':10000},
    ]
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Course Purchase App</h1>
        </header>
        <CourseSales items={courses} />
      </div>
    );
  }
}

export default App;

App组件运行正常，如果我只在Course组件中写入任何字符串，它将显示4次

Answer 1

似乎您正在映射CourseSales组件中的所有内容。

不确定此错字是否也在您的代码中，但在您的Course组件中它是否显示了拼写错误的道具：

console.log(this.porps);

如果更正了，它可以运行吗？

组件没有获得道具

1 个答案: