#8 打印章节标题


  • 0
    administrators

    现在需要在页面上显示一本书的章节,章节内容存放到一个数组里面:

    const lessons = [
      { title: 'Lesson 1: title', description: 'Lesson 1: description' },
      { title: 'Lesson 2: title', description: 'Lesson 2: description' },
      { title: 'Lesson 3: title', description: 'Lesson 3: description' },
      { title: 'Lesson 4: title', description: 'Lesson 4: description' }
      ...
    ]
    

    现在需要你构建两个组件。一个组件为 Lesson 组件,渲染特定章节的内容。可以接受一个名为 lessonprops,并且把章节以下面的格式显示出来:

    <h1>Lesson 1: title</h1>
    <p>Lesson 1: description</p>
    

    点击每个章节的时候,需要把章节在列表中的下标和它的标题打印(console.log)出来,例如第一个章节打印: 0 - Lesson 1: title,第二个章节打印:1 - Lesson 2: title

    另外一个组件为 LessonsList,接受一个名为 lessonsprops,它会使用 Lesson 组件把章节列表渲染出来。


  • 0

    @胡子大哈 运行超时

    const lessons = [
      { title: 'Lesson 1: title', description: 'Lesson 1: description' },
      { title: 'Lesson 2: title', description: 'Lesson 2: description' },
      { title: 'Lesson 3: title', description: 'Lesson 3: description' },
      { title: 'Lesson 4: title', description: 'Lesson 4: description' }
    ]
    class Lesson extends Component {
      /* TODO */
      render () {
        return (
          <div>
             {lessons.map((lession, i) => <LessonsList key={i} num={i} lession={lession} />)}
           </div>
        )
      }
    
    }
    
    class LessonsList extends Component {
      /* TODO */
      handleClickOnTitle(){
          console.log(this.props.num+this.props.lession.title);
      }
    
      render(){
        const { lession } = this.props
        return(
          <div onClick={this.handleClickOnTitle.bind(this)}>
          <h2>{lession.title}</h2>
          <p>{ lession.description}</p>
          </div>
        )
      }
    }
    

  • 1
    administrators

    @francis 应该是 LessonsList 渲染 Lesson,这里有个参考答案你简单对比一下:

    class Lesson extends Component {
      render () {
        const { lesson } = this.props
        return (
          <div onClick={() => console.log(`${this.props.index} - ${lesson.title}`)}>
            <h1>{lesson.title}</h1>
            <p>{lesson.description}</p>
          </div>
        )
      }
    }
    
    class LessonsList extends Component {
      render () {
        return (
          <div>{this.props.lessons.map((lesson, i) => {
            return <Lesson key={i} index={i} lesson={lesson} />
          })}</div>
        )
      }
    }
    

  • 0

    我应该只是名称起反了


  • 0
    administrators

    @francis

    你检查一下这句代码,lession 是未定义的

    {lessons.map((lessions, i) => <LessonsList key={i} num={i} lession={lession} />)}
    

  • 0

    @胡子大哈 ![alt text](0_1494575443272_upload-4d8dd9c5-a8c1-4c38-8a0b-3cd13fb4e372 image url) 这个 是我在本地运行的结果


  • 0
    administrators

    你不需要定义 lessons 数组,它是通过 props 穿进去的。看看题目描述:

    另外一个组件为 LessonsList,接受一个名为 lessons 的 props,它会使用 Lesson 组件把章节列表渲染出来。


  • 0

    实例是<h2> 然而检查的时候提示要<h1>。。。
    另外我这种写法不通过检查,提示 “章节 <h1> 应该渲染 Lesson 17: 文章标题,但是你渲染的是 ”。lz能帮忙看看么

    class Lesson extends Component {
      /* TODO */
    
        render () {
            return <div onClick={() => console.log(`${this.props.index} - ${this.props.title}`)}>
                <h1>{this.props.title}</h1>
                <p>{this.props.description}</p>
            </div>
        }
    }
    
    class LessonsList extends Component {
      /* TODO */
        render () {
            return (
            <div>
                {this.props.lessons.map((lesson, index) =>
                    <Lesson key={index} index={index} title={lesson.title} description={lesson.description}/>
                )}
            </div>
            )
        }
    
    }
    

  • 0
    administrators

    @Dexter 感谢指出错误🙏

    另外你答案错误的原因是这里,题目要求:

    现在需要你构建两个组件。一个组件为 Lesson 组件,渲染特定章节的内容。可以接受一个名为 lessonprops,并且把章节以下面的格式显示出来...


  • 0
    administrators

    @Dexter Lesson 接受的 props 是 lesson, 而不是 titledescription


  • 0

    @胡子大哈 噢噢 眼瞎了没注意 哈哈 谢谢


  • 0

    @胡子大哈

    书中的代码
    {users.map((user, i) => <User key={i} user={user} />)}

    但是作业中的需要使用 index 才能取到值,是不是要在书中修改下?
    key={i} index={i}


  • 0
    administrators

    @enjoyit key 是给 React 解析的,它不是一个普通的 props,不能通过 this.props.key 获取到,它只是给 React,我们业务代码中一般不获取 key。


  • 0

    @胡子大哈
    非常感谢


  • 0

    打印的方法 console.log 应该是被重写了吧:
    原本用的 console.log(this.props.index, ' - ', this.props.lesson.title) 无法通过
    使用console.log(this.props.index + ' - ' + this.props.lesson.title) 可以通过


  • 0
    administrators

    @Sunjourney 是的,被重写了


  • 0

    @胡子大哈 在自己的本地可以打印出来贴上来就提交不了

    const lessons = [
      { title: 'Lesson 1: title', description: 'Lesson 1: description' },
      { title: 'Lesson 2: title', description: 'Lesson 2: description' },
      { title: 'Lesson 3: title', description: 'Lesson 3: description' },
      { title: 'Lesson 4: title', description: 'Lesson 4: description' }
    ]
    
    class Lesson extends Component {
      /* TODO */
      render(){
        let {lesson} = this.props;
        // let lesson = this.props.lesson;
        return(
          <div onClick = {() => console.log(`${this.props.index} - ${lesson.title}`)}>
            <h1>{lesson.title}</h1>
            <p>{lesson.description}</p>
          </div>
        )
      }
    }
    
    class LessonsList extends Component{
      render(){
        return(
             <div>
                  {lessons.map((lesson,i) =>  
                     <Lesson key={i}  index={i} lesson={lesson} />
                     )}
             </div>
        )
      }
    }
    

  • 0
    administrators

    @张美丽 注意题目最后一句话:

    另外一个组件为 LessonsList,接受一个名为 lessons 的 props,它会使用 Lesson 组件把章节列表渲染出来。


  • 0

    class LessonsList extends Component {
      render () {
        return (
        	<div>
        		{lessons.map((lesson,i) => <Lesson key={i} lesson={lesson} />)}
        	</div>
        )
      }
    } 
    
    class Lesson extends Component {
    
    	handleClick(){
    		console.log(this.props.lesson.title)
    		console.log(this.props.lesson.description)
    	}
    
      render () {
        const lesson = this.props.lesson
        return (
          <div onClick={this.handleClick.bind(this)}>
            <h1>{lesson.title}</h1>
            <p>{lesson.description}</p>
            <hr />
          </div>
        )
      }
    }
    

    提交状态: Runtime Error
    运行信息: lessons is not defined

    本地可以运行


  • 0
    administrators

    @Qinhua_Zhao 注意题目最后一句话:

    另外一个组件为 LessonsList,接受一个名为 lessons 的 props,它会使用 Lesson 组件把章节列表渲染出来。

    this.props.lessons


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待