react初学笔记（六）

目标：组件之间值的props参数传递

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'


class LikeButton extends Component {
    // 默认配置也可以这么用，下边是使用||实现的
    //这样做就不需要在render函数中做判断，有无传进来this.props值了，直接使用
    static defaultProps = {
        likedText: '取消',
        unlikedText: '点赞'
    }
    constructor () {
      super()
      this.state = { isLiked: false }
    }
  
    handleClickOnLikeButton () {
      this.setState({
        isLiked: !this.state.isLiked
      })
      //传入点击点击事件
      if (this.props.onClick) {
          /* 
            打印出来的，这个传入的函数是：
            function onClick() {
              return console.log('Click on like button!');
            }
          */
        console.log(this.props.onClick)
        // 调用一下这个函数，于是每次点击，都会在控制它打印出这一句‘click on like button’
        this.props.onClick()
      }
    }

    /* 
        问题：传进来的props在组件内部不可更改 例如重新赋值this.props.likedText = 'a' 会报错
        报错信息：Cannot assign to read only property 'likedText' of object '#<Object>
        需求：由props决定的显示形态有变化，需要修改
        解决办法：通过重新渲染的方式把新的props传入组件中，从而改变显示形态
        思路：通过setState去改变state，之后会重新渲染，在渲染中
    */
    handleClickOnChange () {
        this.setState({
          likedText: '取消',
          unlikedText: '点赞'
        })
    }

    render () {
        // 在组件内部通过this.props的方式获取组件的参数
        // 如果没有参数就用默认值  null || 默认值
      const likedText = this.props.likedText || '取消'
      const unlikedText = this.props.unlikedText || '点赞'
      const wordings = this.props.wordings || {
        likedText: '取消',
        unlikedText: '点赞'
      }
        //传入属性
        //传入对象
      return (
          <div>
            <button onClick={this.handleClickOnLikeButton.bind(this)}>
                {this.state.isLiked ? likedText : unlikedText} ?
            </button>
            <button onClick={this.handleClickOnLikeButton.bind(this)}>
                {this.state.isLiked ? wordings.likedText : wordings.unlikedText} ?
            </button>
          </div>
      )
    }
  }

  class Index extends Component {
    render () {
      return (
        /* 
            // 使用组件时，把参数以属性的形式放进标签中，所有的属性都会作为props对象的键值对
            // 任何类型的数据都可以作为组件的参数，包括字符串、数字、对象、数组、函数等
            // JSX的表达式用{}包裹,传入对象就会变成{{键值对}}
        */
        <div>
            <div>
                <LikeButton likedText='已赞' unlikedText='赞' />
                <LikeButton wordings={{likedText: '已赞', unlikedText: '赞'}} />
                <LikeButton onClick={() => console.log('Click on like button!')}/>
            </div>
            
            <div>
                <span>按钮用来修改state中的两个属性</span>
                <button onClick={this.handleClickOnChange.bind(this)}>修改 wordings</button>
                
                <span>此时再传给likedText的props是已经修改过的state里的值，达到了修改传入props的目的</span>
                <LikeButton likedText={this.state.likedText} unlikedText={this.state.unlikedText}/>
            </div>
        </div>
      )
    }
  }

  
  ReactDOM.render(
    <Index />,
    document.getElementById('root')
  )