javascript - ReactJS this.props不显示

我在按钮上设置了一个简单的属性，并试图在DOM中显示它...我不明白我在做什么错。我看到了Click Me! Current numer is，但没有看到Click Me! Current numer is 1。我必须丢失一些东西吗？没有错误。

class TestElement extends Component {
    render(){
        return (
            <div>
                <Header />
                <div>
                    <button currentNumber={1}>Click Me! Current numer is {this.props.currentNumber}</button>
                </div>
                <Footer />
            </div>
        );
    }
}

最佳答案

React向链下发送道具。在TestElement.render()中，this.props是指传递给TestElement的任何属性，例如：

class TestElement extends Component {
    render () {
        return (
            <span>My Name Is {this.props.name}</span>
        );
    }
}

呈现如下：

<TestElement name="One" />

希望这表明你的台词

<button currentNumber={1}>Click Me! Current numer is {this.props.currentNumber}</button>

混淆了“这个”元素是什么。如果然后使用currentNumber道具渲染TestElement，它将显示在按钮上，但是按钮上的currentNumber={1}属性将被忽略。

编辑

您可以创建一个自定义按钮，如下所示：

class MyCustomButton extends Component {
    render () {
        return (
            <button onClick={this.props.onClick}>Click Me!  Current number is {this.props.number} />
        );
    }
}

class TestElement extends Component {
    constructor () {
        this.state = {
            number: 1
        }
    }
    render () {
        return (
            <div>
                 <h1>The Buttonater!</h1>
                 <MyCustomButton number={this.state.number} onClick={this.onButtonClick} />
            </div>
        );
    }
    onButtonClick () {
        this.setState({
            number: this.state.number + 1
        });
    }
}