React JS：根据输入值生成对应数量的<Beat>组件

Hey there! I see you're building a React metronome app and need to render a variable number of <Beat> components based on the input value. Let's fix this up step by step.

Core Approach #

The key idea is to create an array with a length matching the number of beats you want, then map over that array to generate each <Beat> component. Here's how to implement this in your Beat_Holder component:

class Beat_Holder extends React.Component {
  render(){
    // Create an array where each element represents a beat number (starting from 1)
    const beatsArray = Array.from({ length: this.props.NoFBeats }, (_, index) => index + 1);
    
    return(
      <ul>
        {/* Map each beat number to a Beat component, with a unique key */}
        {beatsArray.map(beatNumber => (
          <Beat key={beatNumber} index={beatNumber} />
        ))}
      </ul>
    )
  }
}

Breakdown of the Code #

• Array.from({ length: this.props.NoFBeats }): Creates an empty array with exactly NoFBeats elements (the value passed from your parent component).
• (_, index) => index + 1: The second argument of Array.from lets us transform each element. Since array indexes start at 0, we add 1 to get natural beat numbers (1, 2, 3...).
• map(beatNumber => <Beat key={beatNumber} index={beatNumber} />): Iterates over the array and renders a <Beat> component for each entry. The key prop is required by React for list rendering—it helps React track which elements have changed, added, or removed.

Fixes for Other Minor Issues #

I noticed a couple of small things in your code that need adjustment to work properly:

1. React Class Name Attribute: In Time_Signature_Control, replace classname with className (React uses camelCase for HTML attributes):

<div className="Time_Signature_Control">

2. Convert Input Value to Number: The number input returns a string value, so we should convert it to an integer to avoid unexpected behavior:

handleChange(event) {
  let beats = parseInt(event.target.value, 10); // Convert string input to integer
  this.setState({value: beats});
  this.props.onGetBeats(beats);
}

3. Simplify Initial State: You can clean up the Time_Signature_Control constructor by setting the initial state directly:

constructor() {
  super();
  this.state = { value: 5 };
}

Full Corrected Code #

Here's the complete code with all fixes applied:

class Time_Signature_and_Beats_Holder extends React.Component {
  constructor() {
    super()
    this.state = { Beats: 4 }
  }
  
  Get_Beats(Number_Of_Beats){
    this.setState({Beats: Number_Of_Beats});
    console.log(Number_Of_Beats);
  }
  
  render(){
    return(
      <div>
        <Time_Signature_Control onGetBeats={this.Get_Beats.bind(this)} />
        <Beat_Holder NoFBeats={this.state.Beats}/>
      </div>
    )
  }
}

class Time_Signature_Control extends React.Component {
  constructor() {
    super();
    this.state = { value: 5 }
  }
  
  handleChange(event) {
    let beats = parseInt(event.target.value, 10);
    this.setState({value: beats});
    this.props.onGetBeats(beats);
  }
  
  render(){
    return(
      <div className="Time_Signature_Control">
        <p>Time Signature:</p>
        <input 
          type="number" 
          value={this.state.value} 
          onChange={this.handleChange.bind(this)} 
          id="bpme" 
          min="2" 
          max="50"
        />
        /
        <select id="Note_Length" name="Note">
          <option value="4">4</option>
          <option value="8">8</option>
          <option value="16">16</option>
          <option value="32">32</option>
        </select>
      </div>
    )
  }
}

class Beat_Holder extends React.Component {
  render(){
    const beatsArray = Array.from({ length: this.props.NoFBeats }, (_, index) => index + 1);
    
    return(
      <ul>
        {beatsArray.map(beatNumber => (
          <Beat key={beatNumber} index={beatNumber} />
        ))}
      </ul>
    )
  }
}

class Beat extends React.Component {
  render(){
    return(
      <li>{this.props.index}</li>
    )
  }
}

That should do it! Now when you adjust the number input, the <Beat> components will update dynamically to match the input value.

内容的提问来源于stack exchange，提问作者Rudolf Grabowski