Javascript 在React应用程序中修改name属性时出现问题

我正在尝试更改组件的名称，但我的逻辑都在父组件中，因此无法访问this.props.name

这是我的开始按钮

class StartButton extends React.Component {
  render(props) {
      return (
        <button onClick={this.props.onClick}>{this.props.name}</button>
      )
    }
  }

这是我想要使用的逻辑，在Header类中需要它，因为它是由onClick激活的

---

我知道，这个.name不起作用，但我不确定如何访问name='Start Button'并更改其值。任何帮助都将不胜感激

你不应该像这样想改变道具，你应该尝试使用状态来改变道具。虽然还有其他方法，但我给出了下面这个天真的例子。保持一种状态，并根据它传递你的道具

类应用程序扩展了React.Component{ 状态={ 重新启动：false }; changeToRestartText==>{ this.setState{restart:true}； }; 渲染{ const{restart}=this.state； 回来 这个，handleClick} /> 更改为重新启动 ; } } 类StartButton扩展了React.Component{ 渲染器{ 返回{this.props.name}； } } ReactDOM.render、document.getElementByIdroot；

---

天哪，非常感谢你。这很有道理。我感谢你的帮助！

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

  changeToRestartText = () => {
    this.name = 'Restart Game'; <---------------------------
  }