#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>
          )
      }
    }
    

  • 0

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

  • 0

    老师好:这段代码本地跑没问题,但是提交后报错:“Cannot read property 'id' of undefined”,万望指点

    class Lesson extends Component {
        /* TODO */
        render(){
          let info  = this.props.lessonInfo;
          return (
            <div>
              <h1 onClick={this.props.handleClick}>Lesson {info.id}: {info.title}</h1>
              <p>Lesson {info.id}: {info.description}</p>
            </div>
          );
        }
      }
      
      class LessonsList extends Component {
        /* TODO */
        log(index, lesson){
            console.log(index + " - Lesson " + lesson.id + " : " + lesson.title);
        }
    
        render(){
          let lessonArr = [
            {id: 1, title: "abc", description: "abcabcabcabcabcabcabcabcabc"},
            {id: 2, title: "def", description: "defdefdefdefdefdefdefdefdef"},
            {id: 3, title: "ghi", description: "ghighighighighighighighighi"},
            {id: 4, title: "jkl", description: "jkljkljkljkljkljkljkljkljkl"},
            {id: 5, title: "mno", description: "mnomnomnomnomnomnomnomnomno"},
          ];
          
          return (
            <div>
            {
              lessonArr.map((lesson) => (
                <Lesson handleClick={() => {this.log(lessonArr.indexOf(lesson), lesson)}} key={lesson.id} lessonInfo={lesson} />
              ))
            }
            </div>
          );
        }
      }

  • 0


  • 0

    提交代码

    之前老是报错说没有正确渲染,原来是因为lessons要从props中拿

      class Lesson extends Component {
        printTitle(i, title) {
          console.log(`${i} - ${title}`)
        }
        render() {
          const { lesson, index } = this.props
          return (
            <div onClick={this.printTitle.bind(this, 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 index={i} key={i} lesson={lesson} />)}
            </div>
          )
        }
      }
    
    

登录后回复
 

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