React中能否在Prop中引用当前组件？动态设置单选框默认选中

Hey there! Let's break down your two questions clearly and directly:

1. Dynamically setting the default checked state for radio inputs #

Absolutely, you can achieve this dynamically—React gives you two solid approaches depending on whether you want controlled or uncontrolled components:

Controlled Component Approach (Recommended) #

Use React state to manage the checked state of your radio inputs. Initialize the state with "dog" so that the corresponding radio is checked by default, and update the state when the user selects a different option. Here's a functional component example:

import { useState } from 'react';

function AnimalSelector() {
  // Start with "dog" as the default selected value
  const [selectedType, setSelectedType] = useState("dog");

  const handleRadioChange = (e) => {
    setSelectedType(e.target.value);
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          name="entityType"
          value="dog"
          checked={selectedType === "dog"}
          onChange={handleRadioChange}
        />
        Dog
      </label>
      <label>
        <input
          type="radio"
          name="entityType"
          value="person"
          checked={selectedType === "person"}
          onChange={handleRadioChange}
        />
        Person
      </label>
    </div>
  );
}

Uncontrolled Component Approach #

If you don't need to sync the checked state with other parts of your app, you can use the defaultChecked prop. This sets the initial state, though it won't update dynamically unless you re-render the component with a new defaultChecked value:

function AnimalSelector() {
  // You can calculate this value dynamically based on your app logic
  const defaultSelected = "dog";

  return (
    <div>
      <label>
        <input
          type="radio"
          name="entityType"
          value="dog"
          defaultChecked={defaultSelected === "dog"}
        />
        Dog
      </label>
      <label>
        <input
          type="radio"
          name="entityType"
          value="person"
          defaultChecked={defaultSelected === "person"}
        />
        Person
      </label>
    </div>
  );
}

2. Can you reference the current component in React props? #

Short answer: No, you can't pass the current component as a prop to itself directly. Here's why:

• Props are passed from a parent component to a child component. When your component is being initialized, it doesn't exist yet—so there's no way for the parent to pass the component instance/itself as a prop.
• Even if you tried to force it (like <MyComponent self={this} /> in class components), this creates a circular reference that breaks rendering and state management.

If you need to access the component's own methods, state, or instance inside the component, you don't need props for that:

• In functional components, define functions directly in the component scope, or use useRef to access DOM elements or hold mutable values.
• In class components, use this to access the component instance, its state, and methods.

If you have a specific use case where you need to pass the component to external logic, do it inside the component (e.g., in an effect or event handler) by passing this (class components) or a ref (functional components) to that logic—don't try to pass it via props.

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