#8 打印章节标题


  • 0

    class Lesson extends Component {
      constructor() {
        super()
        this.state = {
          
        }
      }
      
      handleClickLesson() {
        const { lesson, index } = this.props
        console.log(`${index} - ${lesson.title}`);
      }
      
      render() {
        const {lesson, index} = this.props
        console.log(this.props);
        return (
          <div className="lesson-item" onClick={this.handleClickLesson.bind(this)}>
            <h1>{lesson.title}</h1>
            <p>{lesson.description}</p>
          </div>
        )
      }
    }
    
    class LessonsList extends Component {
      constructor() {
        super()
        this.state = {}
      }
      
      render() {
        const { lessons } = this.props
        console.log(this.props)
        return (
          <div className="lesson-list">
          {
            lessons.map((lesson, index) => <Lesson key={lesson.title} lesson={lesson} index={index}></Lesson>)
          }
          </div>
        )
      }
      
    }
    

    key={lesson.title} 为什么不能通过


  • 0

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

  • 0

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

    class LessonsList extends Component {
    /* TODO */
    render(){
    return (
    <div>
    {this.props.lessons.map((lesson,i)=><Lesson key={i} index={i} lesson={lesson} />)}
    </div>
    )
    }
    }


  • 0

    报错:console.error is not a function,是我这个写法不对吗,求指点

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

    class LessonsList extends React.Component {
    render() {
    return (
    <div>
    {this.props.lessons.map((lesson,i) => {return (<Lesson lesson={lesson} key={i} />);})}
    </div>
    )
    }
    }


  • 0

    class Lesson extends Component {
    /* TODO */
    show(){
    console.log(this.props.nums+' - '+this.props.lesson.title)
    }
    render(){
    return(
    <div onClick={()=>{this.show();}}>
    <h1>{this.props.lesson.title}</h1>
    <p>{this.props.lesson.description}</p>
    </div>
    )
    }
    }

    class LessonsList extends Component {
    /* TODO */
    render(){
    return(
    <div>
    {this.props.lessons.map((item,index)=>{
    return <Lesson key={index} nums={index} lesson={item}/>
    })}
    </div>
    )
    }
    }
    key一开始以为可以当属性直接获取,后来测试了好久才发现不行


  • 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 */
    handleClick(){
    console.log(this.props.index +" - "+this.props.lesson.title)
    }
    render(){
    const {lesson} = this.props;
    return(
    <div onClick={this.handleClick.bind(this)}>
    <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

    class Lesson extends Component {
        /* TODO */
        handleClick(e){
           let index= e.target.parent.childIndex(e.target);
           console.log(index);
        }
        render(){
            let {lesson}=this.props;
            let {index}=this.props;
            return (
                <div onClick={()=>{console.log(index+"-"+lesson.title)}}>
                    <h1>{lesson.title}</h1>
                    <p>{lesson.description}</p>
                </div>
            )
        }
    }
    
    class LessonsList extends Component {
        /* TODO */
        render(){
            let {lessons}=this.props;
            return (
                <div>
                    {
                        lessons.map((lesson,i)=><Lesson key={i} index={i} lesson={lesson}/>)
                    }
                </div>
            )
        }
    }
    
    

  • 0

    @璟瑜 这里的lessons已经默认有了,你要当参数传递给LessonsList组件


  • 0

    @lunarsprite 模板字符串


  • 0

    @ScriptOJ "另外一个组件为 LessonsList,接受一个名为 lessons 的 props",这里lessons是不是写错了


  • 0

    @KaiserZ 对象的解构赋值


  • 1

    @lunarsprite 占位符,ES6的拼接字符串


  • 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{
    render (){
    const {lesson} =this.props
    return (
    <div onClick={this.handleLesson.bind(this)}>
    <h1>{lesson.title}</h1>
    <p>{lesson.description}</p>
    <hr/>
    </div>
    )
    }
    handleLesson(){
    console.log(this.key+'-'+this.props.lesson.title)
    }

    }

    class LessonsList extends Component{
    render (){
    return (
    <div>
    {lessons.map((lesson,i)=> <Lesson key={i} lesson={lesson}/>)}
    </div>
    )
    }
    }


  • 0

    @vincedd 不能直接使用this.props.key来获取,这样是获取不到的


  • 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 {
      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

    测试通过,大家可以参考一下

    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)=><Lesson key={i} index={i} lesson={lesson} />)}
    		   </div>
    		)
    	}
    }
    

  • 0

    class Lesson extends Component {
    /* TODO */
    constructor(props){
    super(props)
    this.go=this.go.bind(this)
    }
    go(){
    console.log(this.props.lesson.index+'-'+this.props.lesson.title)
    }
    render(){
    return (
    <div onClick={this.go} key={this.props.lesson.index}>
    <h1>{this.props.lesson.title} </h1>
    <p>{this.props.lesson.description}</p>
    </div>
    )
    }
    }

    class LessonsList extends Component {
    /* TODO */
    constructor(props){
    super(props)
    }
    render(){
    return (
    <div>
    {this.props.lessons.map((item,i)=>(<Lesson lesson={(item.index=i,item)} />))}
    </div>
    )
    }
    }

    请问错哪了,本地跑没问题


  • 0

    @iamabj

    class Lesson extends Component {
        /* TODO */
        constructor(props){
        super(props)
        this.go=this.go.bind(this)
        }
        go(){
        console.log(this.props.lesson.index+' - '+this.props.lesson.title)
        }
        render(){
        return (
        <div onClick={this.go} key={this.props.lesson.index}>
        <h1>{this.props.lesson.title}</h1>
        <p>{this.props.lesson.description}</p>
        </div>
        )
        }
        }
        
        class LessonsList extends Component {
        /* TODO */
        constructor(props){
        super(props)
        }
        render(){
        return (
        <div>
        {this.props.lessons.map((item,i)=>(<Lesson key={i} lesson={(item.index=i,item)} />))}
        </div>
        )
        }
        }
    

    输出内容的空格造成的问题


  • 0

    @ScriptOJ#8 打印章节标题 中说:

    onClick={() => console.log(${this.props.index} - ${lesson.title})}

    这一段怎么理解的?用到了什么方法啊,看不懂onClick={() => console.log(${this.props.index} - ${lesson.title})}


  • 0

    原来从this.props取key报错,所以要加一个id参数

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

登录后回复
 

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