#8 打印章节标题


  • 0

    @uwenhao2008
    这两种写法是一样的效果
    这种写法是ES6的对象的解构,可以重点看一下


  • 0

    0_1524225341309_upload-2caf14a2-baad-467b-aed1-66d139887248


  • 0

    0_1525941549781_upload-4db0ab7c-66f1-4a81-a8bf-7b786257f45d


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

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

    }

    //自测是对的 娃哈哈~~~


  • 0

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


  • 0

    @mx 你好,问一下为什么要写成const{lesson}=this.props
    //const lesson =this.props不行吗


  • 0

    我知道自己的错误了


  • 0

    class Lesson extends Component {
      handleClickLesson () {
        console.log(this.props.index + ' - ' + this.props.lesson.title)
      }
      render () {
        return (
          <div onClick={this.handleClickLesson.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) => {
              return <Lesson key={index} index={index} lesson={lesson} />
            })}
          </div>
        )
      }
    }
    

  • 0

    @lunarsprit引用(es6)


  • 0

    回复: #8 打印章节标题

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

    一个组件为 Lesson 组件,渲染特定章节的内容。可以接受一个名为 lesson 的 props 可以接受一个 props 并不代表只能接受一个 props,是我傻了,哈哈


  • 0

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

    React

    我刚刚也犯了这个错,this.props.key一直报错 - -


  • 0

    @sylviazhou const lesson = this.props.lesson 或者 {lesson} = this.props 第二种是es6 解构赋值


  • 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组件没见上面应用过


登录后回复
 

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