react组件 三大属性

组件属性props

function HelloMessage(props){
    return <h1>Hello {props.name}</h1>
}
const element = <HelloMessage name="China"/>
ReactDOM.render(
  element,
  document.getElementById('root')
);

1、在父组件中定义一个函数
2、调用子组件时将函数传过去
3、子组件通过this.props.函数名()来调用函数并且执行

// 父组件
class App extends Component {
  render() {
    return (
      <Fragment>
        <Child aaa="红牛" bbb={this.hanshu}></Child>
      </Fragment>
    )
  }
  hanshu(){
    return  "我是父组件传过来的函数"
}}

// 子组件
class Child extends Component{
      render(){
        return (
          <div>{this.props.aaa}{this.props.bbb()}</div>
        )
      }
}

默认props:可以通过组件类的defaultProps属性为props设置默认值

class Hello extends React.Component{
    render(){
        return (
            <h1>hello {this.props.name}</h1>
        )
    }
}
Hello.defaultProps = {
    name:'China'
}
ReactDOM.render(
  <div>
      <HelloMessage name="China"/>
      <Hello/>
  </div>,
  document.getElementById('root')
);

State 和 Props
以下实例演示了如何在应用中组合使用 state 和 props 。
我们可以在父组件中设置 state， 并通过在子组件上使用 props
将其传递到子组件上。在 render 函数中, 我们设置 name 和 site
来获取父组件传递过来的数据。

 class WebSite extends React.Component{
        constructor(){
            super();

            this.state = {
                name:'菜鸟教程',
                site:'https://www.runoob.com'
            }
        }

        render(){
            return (
                <div>
                   <Name name={this.state.name} />
                   <Link site={this.state.site} />
                </div>
            )
        }
      }

      class Name extends React.Component{
          render(){
              return (
                  <h1>{this.props.name}</h1>
              )
          }
      }

      class Link extends React.Component{
          render(){
              return (
                  <a href={this.props.site}>{this.props.site}</a>
              )
          }
      }
      ReactDOM.render(
        <div>
            <WebSite />
        </div>,
        document.getElementById('root')
      );

react组件三大属性之一 refs

1、组件内的标签都可以定义ref属性来表示自己
a. <input type=“text” ref={input => this.msgInput = input}/>
　　 b. 回调函数在组件初始化渲染完或卸载时自动调用
2、在组件中通过this.msgInput来得到对应的真是DOM元素
3、作用：通过ref获取组件内容特定标签对象，进行读取相关数

事件处理
1、通过onXxx属性指定事件的处理函数（注意大小写）
a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
　　b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2、通过event.target得到发生事件的DOM元素对象

<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target //返回input对象
}

强烈注意

1. 组件内置的方法中的this为组件对象
2. 在组件类中自定义的方法中this为null
   　　a. 强制绑定this: 通过函数对象的bind()
   　　b. 箭头函数(ES6模块化编码时才能使用)

class MyComponent extends React.Component {
        constructor(props) {
            super(props) // 调用父类(Component)的构造函数

            // 将自定义的函数强制绑定为组件对象
            this.handleClick = this.handleClick.bind(this) // 将返回函数中的this强制绑定为指定的对象, 并没有改变原来的函数中的this
            this.handleBlur = this.handleBlur.bind(this) // 将返回函数中的this强制绑定为指定的对象, 并没有改变原来的函数中的this
        }

        handleClick(){
            //官方不建议这么写
            const input = this.refs.content
            alert(input.value)
            //建议这么搞
            alert(this.x.value)
        }

        handleBlur(event){
            alert(event.target.value)
        }

        render() {
            return (
                <div>
                    <input type="text" ref="content"/>{' '}
                    <input type="text" ref={x => this.x = x}/>{' '}
                    <button onClick={this.handleClick}>提示输入数据</button>{' '}
                    <input type="text" placeholder="失去焦点提示数据" onBlur={this.handleBlur}/>
                </div>
            )
        }
    }
      ReactDOM.render(
        <div>
           <MyComponent/>
        </div>,
        document.getElementById('root')
      );

react组件三大属性之一 state
组件被称为状态机，页面的显示是根据组件中state属性中的数据来显示的

理解：
1、state是组件对象那个的重要属性，值是对象（可包含多个数据）
2、组件被称为状态机，通过更新组件的state来更新对应的页面显示（重新渲染组件）

1. 初始化状态:
   constructor (props) {
   super(props)
   this.state = {
   stateProp1 : value1,
   stateProp2 : value2
   }
   }
2. 读取某个状态值
   this.state.statePropertyName
3. 更新状态---->组件界面更新
   this.setState({
   stateProp1 : value1,
   stateProp2 : value2
   })

class Link extends React.Component{
constructor(props){
super(props)
this.state = {
isLink : false
}
//将新增方法this强制绑定为组件对象，bind返回新函数
this.handleClick = this.handleClick.bind(this)
}

//新添加的方法this默认不是组件对象，而是undefined
handleClick(){
    //更新状态
    const isLink = !this.state.isLink
    this.setState({isLink})
}

render(){
    //根据状态获取结果
    const text = this.state.isLink ? 'apple' :'pear'
    return <h2 onClick={this.handleClick}>{text}</h2> 
}

}