ReactJS动态增量计数器组件调试：复用按钮类功能异常排查

Let's break down all the issues in your refactored code that are causing the blank page, then fix them step by step:

Key Issues in the Refactored Code #

• State management mistake: Your ChallengeButton component is trying to call this.setState, but the count state lives in the parent Challenge component. Child components shouldn't modify parent state directly—instead, pass a callback from the parent to the child to handle state updates.
• Syntax errors in component definitions:
  • In the Challenge component, your render function is incorrectly nested inside getInitialState, and there's an extra comma after the return statement in getInitialState.
  • Both components' render methods are returning objects (using {}) instead of valid JSX elements (which should be wrapped in () or written directly without curly braces).
• Incorrect prop handling:
  • You're passing incCount as strings ('1', '5', '10') instead of numbers, which would cause string concatenation instead of numeric addition.
  • The className prop passed to ChallengeButton isn't being applied to the button element.
  • Buttons are missing their display text (like "Add 1") so they'd be invisible even if rendered.

Fixed Refactored Code #

Here's the corrected version that matches the original functionality perfectly:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>React tutorial</title> 
<script src="https://unpkg.com/react@0.14.7/dist/react.js"></script> 
<script src="https://unpkg.com/react-dom@0.14.7/dist/react-dom.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
<link rel="stylesheet" type="text/css" href="lesson5challengestyling.css"> 
</head> 
<body> 
<div id="app"></div> 
<script type="text/babel"> 
var ChallengeButton = React.createClass({ 
  render: function(){ 
    return (
      <button 
        className={`btn ${this.props.className}`}
        onClick={() => this.props.onIncrement(this.props.incCount)}
      >
        Add {this.props.incCount}
      </button>
    )
  } 
}); 

var Challenge = React.createClass({ 
  getInitialState: function(){ 
    return { count: 0 };
  },
  increment: function(amount) {
    this.setState({ count: this.state.count + amount });
  },
  render: function(){ 
    return (
      <div className="container"> 
        <h1>Count: {this.state.count}</h1> 
        <ChallengeButton className="blue-btn" incCount={1} onIncrement={this.increment}/>
        <ChallengeButton className="green-btn" incCount={5} onIncrement={this.increment}/>
        <ChallengeButton className="purple-btn" incCount={10} onIncrement={this.increment}/>
      </div> 
    )
  } 
}); 

ReactDOM.render( 
  <Challenge />, 
  document.getElementById('app') 
); 
</script> 
</body> 
</html>

What Changed? #

1. Parent state control: Moved the increment method to the parent Challenge component, where the count state lives. This method accepts an amount parameter to update the state correctly.
2. Callback prop: Passed the parent's increment method to ChallengeButton as an onIncrement prop. The button uses an arrow function to call this callback with its incCount value when clicked.
3. Fixed syntax errors:
   • Corrected the getInitialState method in Challenge (removed extra comma, closed the method properly before defining render).
   • Changed render methods to return valid JSX wrapped in parentheses instead of objects.
4. Prop fixes:
   • Passed incCount as numbers ({1} instead of '1') to ensure numeric addition.
   • Applied the className prop to the button element, combining it with the base btn class from your CSS.
   • Added button text (Add {this.props.incCount}) so the buttons are visible and user-friendly.
5. Restored container class: Added back the container class to the parent div to apply your CSS styling correctly.

This code will now behave exactly like your original working example, with reusable buttons that trigger the correct count increments.

内容的提问来源于stack exchange，提问作者Sam Germain