為什么這個反應按鈕在按下時不會改變 div 文本顏色？

Question

我的問題是為什么這個按鈕在按下時沒有將 div 文本顏色更改為綠色？

這是代碼，希望對您幫助我解決這個疑問有用：

import React from 'react';
import hola from './hola.css'

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: props.color };
  }

  render() {
    return (
      <div style={{ color: this.state.color }}> Hello World! </div>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: 'red' };
  }

  render() {
    return (
      <div>
        <Child color={this.state.color} />
        <button onClick={() => this.setState({ color: 'green'})}>
          Change Color
        </button>
      </div>
    )
  }
}

export default App;

Answer 1

你的構造函數運行一次，你將它的初始值復制到 state 中，它永遠不會改變。 您在這里有兩個選擇：

1. 將按鈕移動到組件中，使其設置組件自己的state：

render() {
  return (
    <>
      <div style={{ color: this.state.color }}> Hello World! </div>
      <button onClick={() => this.setState({ color: 'green'})}>
        Change Color
      </button>
  )
}

2. 直接使用道具：

<div style={{ color: this.props.color }}> Hello World! </div>