javascript - React 功能组件道具不更新

Question

我使用功能组件来显示这些 div。我还有另一个使用 displayCounter 组件并跟踪状态的组件。我的状态是一个计数器，我有一些按钮来增加和减少计数器。

假设国家是

状态 = { 计数器：0 }

示例 1 的 div 不显示计数器的变化。但是示例 2 的 div 可以正常工作吗？

所以当我点击增加按钮时，div 1 总是显示 0，但 div 2 工作正常。

有人可以向我解释原因吗？

import React from 'react';

const displayCounter = (props) => {
    return (
        <div>
            <div> Example 1: {props.value} </div>
            <div> Example 2: <span>{props.value}</span> </div>
        </div>
    );
}

export default displayCounter;

如果您想发布小应用程序的完整代码，请添加评论。

import React, { Component } from 'react';

import CounterControl from '../../components/CounterControl/CounterControl';
import DisplayCounter from '../../components/DisplayCounter';

class Counter extends Component {
    state = {
        counter: 0
    }

    counterChangedHandler = () => {
        this.setState( ( prevState ) => { return { counter: prevState.counter + 1 } } )
    }

    render () {
        return (
            <div>
                <DisplayCounter value={this.state.counter}/>
                <CounterControl label="Increment" clicked={() => this.counterChangedHandler( 'inc' )} />
            </div>
        );
    }
}

export default Counter;

标签： javascriptreactjs

Answer 1

你不应该使用道具，道具是一种老方法，你应该使用这个

import React from 'react';

const displayCounter = ({ counter }) => {
    return (
        <div>
            <div> Example 1: {counter} </div>
            <div> Example 2: <span>{counter}</span> </div>
        </div>
    );
}

export default displayCounter;