目标:组件之间值的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')
)