react-----state

旧城等待， 2023-06-06 14:26 10阅读 0赞

props：从组件外部向组件传值，只读

refs：给实例对象一个唯一的标识

state:组件被称为‘状态机’，通过更新组件的状态值来更新对应的页面显示（重新渲染）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            class StateCom extends React.Component{
                constructor(props){
                    super(props);
                    this.state = {
                        isSate : true
                    }
                    this.changeText = this.changeText.bind(this)
                }
                changeText(){
                    this.setState({
                        isSate : !this.state.isSate
                    })
                }
                render(){
                    let {isSate} = this.state;
                    let msg = isSate ? "女儿好可爱" : "好可爱女儿"
                    
                    return (
                        <div onClick={this.changeText}>
                            {msg}
    
                        </div>
                    )
                }
            }
            ReactDOM.render(<StateCom />,document.getElementById('app'))
        </script>
    </body>
    </html>

react-----state

发表评论取消回复

还没有评论，来说两句吧...

相关阅读