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向链中发送道具。在navigationItem.leftBarButtonItem = UIBarButtonItem(image: UIImage(named: "29x29"), style: .Plain, target: splitViewController!.displayModeButtonItem().target, action: splitViewController!.displayModeButtonItem().action)中，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>道具渲染了TestElement，它将显示在您的按钮上，但该按钮上的currentNumber属性将被忽略。

修改

你可以创建一个这样的自定义按钮：

currentNumber={1}

Answer 2

为定义的组件实例设置了

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 }); } }。 this.props指的是该类的实例。

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

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

TestElement

然后使用此组件的实例。

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

ReactJS this.props没有显示

2 个答案:

修改