ReactJS this.props不显示

Question

我在按钮上设置了一个简单的属性，并试图在DOM中显示它...我不明白我在做什么错。 我看到Click Me! Current numer is Click Me! Current numer is ，但不是Click Me! Current numer is 1 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向链下发送道具。 在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
        });
    }
}

Answer 2

this.props是为您要定义的组件实例设置的 。 this是指该类的实例。

在这种情况下， this.props引用this.props的某些实例的TestElement 。

如果要使用传递给按钮组件的道具，则必须将其定义为子组件。

class Button extends Component {
  render() {
    return (
      <button ...this.props>{this.props.currentNumber}</button>
    );
  }
}

然后改为使用此组件的实例。

<Button currentNumber={1} />