我试图改变一个组件的名称,但我的逻辑都在父组件中,因此无法访问。this.props.name
.
这是我的启动按钮
class StartButton extends React.Component {
render(props) {
return (
<button onClick={this.props.onClick}>{this.props.name}</button>
)
}
}
在我 Header
类,我使用StartButton与 name='Start Button'
render() {
return (
<header>
<div className="headerContainer">
<div id="countdown">
<p>Countdown: <span id="countdownSpan"></span></p>
</div>
<div className="flex-item-header">
<StartButton
name='Start Button'. <------------------------------
onClick={() => this.handleClick()}
/>
</div>
<div>
<p>Word Count: <span id="noOfWords"></span></p>
</div>
</div>
</header>
)
}
}
这是我想要使用的逻辑,需要在 Header
类,因为它是由 onClick
.
changeToRestartText = () => {
this.name = 'Restart Game'; <---------------------------
}
我知道,this.name不能用,但我不知道如何访问 name='Start Button'
并改变其值。如果有任何帮助,我将感激不尽
与其想着这样改变道具(没有这样的方法),你应该尝试使用状态来实现。虽然还有其他的方法,但我下面举的是天真的例子。保留一个状态,根据它来传递你的道具。
class App extends React.Component {
state = {
restart: false
};
changeToRestartText = () => {
this.setState({ restart: true });
};
render() {
const { restart } = this.state;
return (
<div>
<StartButton
name={!restart ? "Start Button" : "Restart Game"}
onClick={() => this.handleClick()}
/>
<button onClick={this.changeToRestartText}>Change to restart</button>
</div>
);
}
}
class StartButton extends React.Component {
render(props) {
return <button onClick={this.props.onClick}>{this.props.name}</button>;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />