React多按钮点击展示不同指令段落的技术求助

Hey there! Let's get your React component working as intended. You're close, but right now your code isn't rendering the instructions because you're not using state to control what gets displayed, and your onClick handlers aren't set up correctly. Here's how to fix it step by step:

What's Wrong With Your Current Code? #

• You're passing component functions directly to onClick, which won't render the components—onClick needs an event handler function that updates your component's state.
• There's no way to track which button was clicked, so your app doesn't know which instructions to show.

Corrected Class Component Version #

Since you started with a class component, here's the fixed version that uses state to manage the active instruction:

import React from 'react';

// Define your instruction components (or you could just use text directly)
function Unilevel() {
  return <h1>here are the uni instructions</h1>;
}

function Scllevel() {
  return <h1>school instruction</h1>;
}

class Instruction extends React.Component {
  // Initialize state to track which instruction is active
  state = {
    activeInstruction: null // null means no instruction is shown initially
  };

  // Event handlers to update state when buttons are clicked
  handleUniClick = () => {
    this.setState({ activeInstruction: 'uni' });
  };

  handleSchoolClick = () => {
    this.setState({ activeInstruction: 'school' });
  };

  render() {
    const { activeInstruction } = this.state;

    return (
      <div>
        <button onClick={this.handleUniClick}>Uni Instruction</button>
        <button onClick={this.handleSchoolClick}>School Instruction</button>
        
        {/* Conditionally render the correct instruction based on state */}
        {activeInstruction === 'uni' && <Unilevel />}
        {activeInstruction === 'school' && <Scllevel />}
      </div>
    );
  }
}

export default Instruction;

How This Works: #

1. State Management: The activeInstruction state variable keeps track of which button was clicked. It starts as null so nothing shows up initially.
2. Event Handlers: handleUniClick and handleSchoolClick are functions that update the state when their respective buttons are clicked.
3. Conditional Rendering: We check the value of activeInstruction and only render the corresponding component if the match is true.

Bonus: Function Component Version (Modern React) #

If you want to use the more modern function component syntax with hooks, here's an alternative:

import React, { useState } from 'react';

function Unilevel() {
  return <h1>here are the uni instructions</h1>;
}

function Scllevel() {
  return <h1>school instruction</h1>;
}

function Instruction() {
  const [activeInstruction, setActiveInstruction] = useState(null);

  return (
    <div>
      <button onClick={() => setActiveInstruction('uni')}>Uni Instruction</button>
      <button onClick={() => setActiveInstruction('school')}>School Instruction</button>
      
      {activeInstruction === 'uni' && <Unilevel />}
      {activeInstruction === 'school' && <Scllevel />}
    </div>
  );
}

export default Instruction;

This does the same thing but uses the useState hook instead of class state—this is the recommended approach for new React code.

Key Takeaways for React Beginners: #

• State drives UI changes: Whenever you want something to show/hide or update based on user interaction, use state.
• Event handlers update state: Buttons trigger functions that change state, which in turn updates what's rendered.
• Conditional rendering: Use logical operators (&&) or if/else statements to show different content based on state values.

内容的提问来源于stack exchange，提问作者Sandeepa Kariyawasam