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} />