React（3）变量使用、变量更新、父子组件变量传递

Love The Way You Lie 2022-05-31 06:38 180阅读 0赞

### 5、变量 ###

被中括号包含。

let foo = 'world'
    
    class HelloWord extends React.Component { 
    
        render() {
            return <div className={domClass}>
                Hello，{foo}
            </div>
        }
    }

### 6、组件变量 ###

放在 state 属性中，通过 `setState` 方法修改.

class HelloWord extends React.Component { 
        constructor(props) {
            super(props);
            // 必须存在this.state中
            this.state = {
                seconds: 0
            }
            setInterval(() => {
                // 调用setState方法修改变量的值
                this.setState({
                    seconds: this.state.seconds + 1
                })
            }, 1000)
        }
    
        render() {
            return <div className={domClass}>
                Hello，{foo}！距离上一次修改页面，过去了{
       this.state.seconds}秒
            </div>
        }
    }

### 7、更新组件变量 ###

将组件变量存到 `state` 属性中，然后通过 `setState()` 来更新变量。

class HelloWord extends React.Component { 
        constructor(props) {
            // props的值就是你传给他的变量，比如这里就是 {toChild: 'world'}
            super(props);
            // 必须存在this.state中
            this.state = {
                seconds: 0
            }
            setInterval(() => {
                // 调用setState方法修改变量的值
                this.setState({
                    seconds: this.state.seconds + 1
                })
            }, 1000)
        }
    
        render() {
            return <div className={domClass}>
                {
       /* 需要通过this.state.world 来使用。当然你也可以赋值到 this 的其他变量 */}
                Hello，World！距离上一次修改页面，过去了{
       this.state.seconds}秒
            </div>
        }
    }
    
    ReactDOM.render(
        <div>
            <HelloWord/>
        </div>,
        document.getElementById('root')
    )

### 8、变量传递 ###

父组件中，通过写在子组件的标签里来传值。

class HelloWord extends React.Component { 
        constructor(props) {
            // props的值就是你传给他的变量，比如这里就是 {toChild: 'world'}
            super(props);
            // 必须存在this.state中
            this.state = {
                world: props.toChild,
                seconds: 0
            }
            setInterval(() => {
                // 调用setState方法修改变量的值
                this.setState({
                    seconds: this.state.seconds + 1
                })
            }, 1000)
        }
    
        render() {
            return <div className={domClass}>
                {
       /* 需要通过this.state.world 来使用。当然你也可以赋值到 this 的其他变量 */}
                Hello，{
       this.state.world}！距离上一次修改页面，过去了{
       this.state.seconds}秒
            </div>
        }
    }
    
    // 要传的变量
    let foo = 'world'
    
    ReactDOM.render(
        <div>
            {
       /* ---- toChild 就是传递给子组件的变量的key ---- */}
            {
       /* ---- foo就是被传的变量（这里就是字符串 'world'） ---- */}
            <HelloWord toChild={foo}/>
            <p>当前时间是：{formatDate(new Date())}</p>
            {
       /*<Learner/>*/}
        </div>,
        document.getElementById('root')
    )