ReactJS this.props没有显示

Question

我在按钮上设置一个简单的属性,并尝试在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>
        );
    }
}

Answer 1

React向链中发送道具.In 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
        });
    }
}