#8 打印章节标题


  • 0

    class Lesson extends Component {
    /* TODO */

    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>
    </div>
    )
    }
    }

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


  • 0

    class Lesson extends Component {
    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 {
    /* TODO */
    render(){
    const { lessons } = this.props
    return(
    <div>
    {lessons.map((lesson,i)=>
    <Lesson key={i} index={i} lesson={ lesson } />
    )}
    </div>
    )
    }
    }


  • 0

    @KaiserZ @ScriptOJ 同问。 这是把所有传进来的props赋值给lesson对象吗


  • 0

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

  • 0

    调试说title未定义?
    class Lesson extends Component {
    constructor(props){
    super(props)
    }

    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>
    </div>
    )
    }
    /* TODO */
    }

    class LessonsList extends Component {
    constructor(props){
    super(props)
    }

    render(){
    return(
    <div>{this.props.lessons.map((lesson, i) => {
    return <Lesson lesson={lesson} index={i} key={i}/>
    })}</div>
    )
    }
    }


  • 0

    @charblus  我也遇到相同的问题,思考了一下应该是lessons引用问题把

    本地是写在同一个JS文件里
    网上上编译器是用过import导入进来


  • 0

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

  • 0

    @ScriptOJ
    <div>{this.props.lessons.map((lesson, i) => {
    return <Lesson key={i} index={i} lesson={lesson} />
    })}</div>
    这段代码中this.props.lessons这句为什么用this.props ?
    这个LessonsList组件没见上面应用过


  • 0

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

  • 0

    请问大神,直接在子组件读key为啥不可以啊,关键字不能按属性读取么

    class Lesson extends Component {
      constructor(props){
        super(props);
        
      }
      handle=()=>{
        console.log(this.props.key+' - '+this.props.lesson.title);
      }
      render(){
        return (
          <div onClick={this.handle}>
            <h1>{this.props.lesson.title}</h1>
            <p>{this.props.lesson.description}</p>
          </div>
          )
      }
      static defaultProps={
        lesson:{
          title:"default",
          description:"default"
        }
      }
      /* TODO */
    }
    
    class LessonsList extends Component {
      /* TODO */
      constructor(props){
        super(props);
        
      }
    
      render(){
        return (
          <div>
          {
            this.props.lessons.map((lesson,i)=>{
              return <Lesson key={i} lesson={lesson}/>;
            })
          }
          </div>
          )
      }
    }
    

登录后回复
 

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