React组件中如何用Hooks导入Props？类组件Props调用失效求助

Hey there! Let's break down why you're running into this confusion with props and state in React class components—this is a super common mix-up when switching between function and class components, so you're not alone!

核心问题：你混淆了Props和State的本质 #

First off, let's clarify the key difference between these two, because that's where the issue starts:

• Props: These are external values passed from a parent component to a child. In class components, you access them via this.props (no .state attached!). They're read-only—you can't modify props directly in the child.
• State: This is internal, mutable data that the component manages on its own. In class components, you access it via this.state, and update it with this.setState().

Your problem comes from trying to use this.props.state or props.state—that syntax doesn't make sense because props and state are separate systems. Let's look at correct usage with examples.

正确用法示例 #

1. 访问类组件自身的内部State #

If you're trying to use the component's own state (like you would with useState in function components), here's how to do it:

class Counter extends React.Component {
  // Initialize state (can use constructor or class field syntax)
  state = {
    count: 0
  };

  incrementCount = () => {
    // Always use this.setState() to update state in class components
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  render() {
    // Access internal state with this.state
    return (
      <div>
        <p>Current count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

2. 接收父组件传递的Props（包括父组件的State） #

If you're trying to use data that a parent component passed down (even if that data is the parent's state), you access it directly from this.props—not this.props.state:

// Parent component that passes its state as props
class Parent extends React.Component {
  state = { userName: "Alice" };

  render() {
    // Pass the parent's state as a prop to the child
    return <Greeting name={this.state.userName} />;
  }
}

// Child class component receiving props
class Greeting extends React.Component {
  render() {
    // Access the prop directly via this.props
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

常见误区提醒 #

• Never try to modify this.props directly! Props are read-only. If you need to change a value passed via props, ask the parent component to update its state (and pass down the new value).
• In class components, you can't use Hooks like useState—stick to this.state and this.setState() for internal state management.
• If you see this.props.state in your code, that's a red flag—double-check if you meant to access the component's own state (this.state) or a specific prop the parent passed.

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