#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() {
    const { lesson } = this.props
    return (
    <div onClick = { this.handleFn.bind(this) }>
    <h1>{ lesson.title }</h1>
    <p>{ lesson.description }</p>
    </div>
    )
    }
    handleFn () {
    console.log(${ this.props.index } - ${ this.props.lesson.title })
    }
    }

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


  • 0

    @张美丽 题目中说了 LessonList接收一个props 就是说题目中的Lesson数组是一个数据结构传过来的,所以你要用 this.props.lesson.map()去操作这个数组


  • 0

    @userkevin handleFn()中log的引用错了 es6的编程规则 对于动态字符串,应该用两个反引号也就是1左边这个"``"键。


  • 0

    @fmheart onClick之后用了es6中的两个编程规则, 一个是对于IIFE 现在用箭头函数代替,再一个对于动态字符串,也就是log中的内容需要用两个反引号"``"包裹,在这个里面,变量需要用${}来引用,其他的字符串格式遵循你的字面量


  • 0

    @ScriptOJ ①<Lesson key={i} lesson={lesson} onClick={()=>{console.log(i+"-"+lesson.title)}} />第一问题有同样的疑问


  • 0

    class Lesson extends Component {
    /* TODO */

    click(){
    	console.log(this.props.index + "-" + this.props.lessons.title)
    	//console.log(111)
      }
    render(){
      const lesson = this.props.lessons
      return(
    	<div onClick = {this.click.bind(this)}>
    		<h1>{lesson.title}</h1>
    		<p>{lesson.description}</p>
    	</div>
    	)
    }
    

    }

    class LessonsList extends Component {
    /* TODO */

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

    }

    0_1513043955614__0(PIT7FR5USB$1BY08H9{H.png


  • 0


  • 0

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

  • 0

    我有个问题,下面的写法错在哪里,谢谢。就是我把clickHandler()函数这里貌似有问题,但是弄了好久也没有想出来
    class Lesson extends Component{
    render(){
    const {lesson}=this.props
    return(<div onClick={this.clickHandler()}>
    <h1>{lesson.title}</h1>
    <p>{lesson.description}</p>
    </div>)
    }
    }

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


  • 0

    @guanjianhua clickHandler方法应该写在 class Lesson 的里面


  • 0

    class Lesson extends Component {
      /* TODO */
      constructor(props){
        super(props)
      }
      handleClick(){
        console.log(this.props._index + ' - ' + 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 {
      /* TODO */
      constructor(props){
        super(props)
      }
      
      render(){
        return (
          <div>
            // 不要忘记 {}
            {this.props.lessons.map(function(lesson, index){
              return (<Lesson key={index} _index={index} lesson={lesson} />)
            })}
          </div>
        )
      }
    }
    
    

  • 0

    @zzc 谢谢你呢


  • 0

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

  • 0

    0_1515642913880_upload-9641834a-fc0c-493b-931a-1612afdfd894
    0_1515643020519_upload-07dacdd0-b47e-47cd-9ed9-5166478364dc

    这是页面编辑验证的问题吗?


  • 0

    打印下标索引的时候,开始想直接用key,但是这个在组件中用this.props.key取不到,所以又用num传入一样的值。
    key是React的一个内部映射,但其不会传递给组件的内部。如果你需要在组件中使用相同的值,可以明确使用一个不同名字的 prop 传入。

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

  • 0

    题目出的?胡子大哈 我特别想问问你 ,你语文到底跟哪学的


  • 0

    //来比比答案
    class Lesson extends Component {
    handleClick(index, title) {
    console.log(index + " - " + title)
    }

    render() {
        const lesson = this.props.lesson
        const index = this.props.index
        return (
            <div onClick={this.handleClick.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 key={i} index={i} lesson={lesson}/>)}
    </div>
    )
    }
    }


  • 0

    @administrators
    单独使用
    const les = this.props.lessons
    然后就报错了,不知道为什么


  • 0

    class Lesson extends Component {
      static propTypes = {
        lesson: PropTypes.object,
        onClick: PropTypes.func
      }
    
      render() {
        return (
          <div onClick={this.props.onClick}>
            <h1>{this.props.lesson.title}</h1>
            <p>{this.props.lesson.description}</p>
          </div>
        )
      }
    }
    
    class LessonsList extends Component {
      static propTypes = {
        lessons: PropTypes.Array
      }
      
      render() {
        return (
          <div>
            {this.props.lessons.map((v,i) => (
              <Lesson lesson={v} onClick={()=>{console.log(`${i} - ${v.title}`)}} key={i} /> 
            ))}
          </div>  
        )
      }
    }
    

  • 0

    题目关注props的应用,理解原理就能完成题目

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

登录后回复
 

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