#8 打印章节标题


  • 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


  • 0

    {lessons.map((lesson,i) => <Lesson key={i} index={i} lesson={lesson} />)}
    

    自动创建一个props.index


  • 0


  • 0

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

  • 0

    ①<Lesson key={i} lesson={lesson} onClick={()=>{console.log(i+"-"+lesson.title)}} />
    我一直有个疑问 为什么不能直接在父组件中用onClick方法呢?
    ${this.props.index} - ${lesson.title}最外面2个符号我在SQL中用过,在这里是什么意思呢?还有$符是代表父组件吗?


  • 0
    administrators

    @还好侑脉动 ES6 字符串语法


  • 0

    @胡子大哈 在 #8 打印章节标题 中说:

    (${this.props.index} - ${lesson.title})}

    看了您的参考答案,请问第五行console.log里面的$有什么特殊作用么?


  • 0

    @胡子大哈 借这里问您一下const { lesson } = this.props其中的{lesson}是什么用法,而且为什么不写成const { lesson } = this.props.lesson呢?


  • 0


  • 0

    function Lesson({
      lesson,index
    }) {
      const style={
        border:'1px solid #000'
      }
      const handleClick=()=>{
        console.log(`${index}-${lesson.title}`)
      }
      return ( 
        <div style={style} onClick={()=>handleClick()}> <h1 className="h1"> {
        lesson.title
                        } </h1>
        <p>{lesson.description}</p> </div>
      )
    } 
    
    function LessonsList () {
      return (
      <div>
        {
          lessons.map((lesson,i)=><Lesson lesson={lesson} key={i} index={i} />)
        }
        </div>
      )
    }
    

    报这个错? 另外key不可当属性传递吗?
    0_1496804722003_upload-7c2cd436-e870-4c79-9d62-8f319b1055cc


  • 0
    administrators

    @Nico

    1. 空格太多了
    2. key 不可以当属性传

  • 1

    贴下我的~ 刚开始老是忘记中括号,特别map循环子组件的时候..... 还有key原来不能当属性传,刚开始还想就传一个key偷懒来着(─.─|||

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

  • 0

    @胡子大哈

    class Lesson extends Component {
      handleClick(){
        console.log(this.props.num+'-'+this.props.lesson.title);
      }
      render(){
        return(
          <div onClick=this.handleClick.bind(this)>
            <h1>{this.props.lesson.title}</h1>
            <p>{this.props.lesson.description}</p>
          </div>
          );
      }
    }
    
    class LessonsList extends Component {
      render(){
        return(
          <div>
          {this.props.lessons.map((lesson,index)=><Lesson key={index} num={index} lesson={lesson}></Lesson>)}
          </div>
          );
      }
    }
    

    提示我ListenList组件的jsx表达式有错。。


  • 0
    administrators

    @lankunblue

    改成

    <div onClick={this.handleClick.bind(this)}>
    

  • 0

    @胡子大哈
    啊啊啊,老是犯这种低级错误。哭死。谢谢指出


  • 0

    
    // 在本地实现了, 但貌似没有严格按要求实现。。
    
    const l = [
      { 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 {
    
      handleLessons(){
        console.log(this.props.index + ' - ' + this.props.lesson.title)
      }
    
      render(){
        const { lesson } = this.props;
        return(
          <div onClick={this.handleLessons.bind(this)}>
            <h1>{lesson.title}</h1>
            <p>{lesson.description}</p>
          </div>
        )
      }
    }
    
    class LessonsList extends Component {
      render(){
        const { lessons } = this.props;
          return(
            <div>
              {l.map( (lessons, i) => {
                return (
                  <Lesson key={i} index={i} lesson={lessons} />
                )
              } )}
            </div>
          )
      }
    }
    
    /* 
     0 - Lesson 1: title
     1 - Lesson 2: title
     2 - Lesson 3: title
     3 - Lesson 4: title 
     */
    
    
    

  • 0

    class Lesson extends Component {
      static defaultProps = {
        lesson: '',
        idx: ''
      };
      /* TODO */
      constructor() {
        super();
      }
      
      handleClick(title, idx) {
        console.log(`${idx} - ${title}`);
      }
      
      render() {
        const {lesson, idx} = this.props;
        return(
          <div className="lesson" onClick={this.handleClick.bind(this, lesson.title, idx)}>
            <h1>{lesson.title}</h1>
            <p>{lesson.description}</p>
          </div>
        )
      }
    }
    
    class LessonsList extends Component {
      /* TODO */
      render() {
        return(
          <div className="lesson-list">
          {
            this.props.lessons.map((item, idx)=>{
              return(
                <Lesson key={`${idx}`} lesson={item} idx={idx} />
              )
            })
          }
          </div>
        )
      }
    }
    

    我在key里写成<Lesson key={`lesson_${idx}`} lesson={item} idx={idx} />,尽然判断出错,然后自己写了个lessons保存数组,然后从数组中读取内容,出错,说无法获取章节列表,懵逼了好久。


登录后回复
 

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