如何在外部文件访问作为库导入的React组件state？有无替代方案？

I've written a React Toggle component with internal state:

export const Toggle = ({ initialValue, theme, ...otherProps }) => {
  const [isToggle, setIsToggle] = useState(initialValue)
  const toggleProps = { initialValue: initialValue, theme: theme }
  const handleClick = () => {
    setIsToggle(!isToggle)
  }
  return (
    <StyledToggle isToggle={isToggle} {...toggleProps}{...otherProps} onClick={handleClick}>
    </StyledToggle>
  )
}

I'm importing this component into another file to use it:

import {Toggle} from 'something'
// <Toggle />

Can I access the internal isToggle state from outside the component in this imported file? If direct access isn't possible, what are the feasible alternatives?

Great question! Short answer: No, you can't directly access the internal isToggle state of your Toggle component from outside it—React's design emphasizes encapsulation, so component-internal state is private by default. But there are several standard, idiomatic ways to share or sync that state with the parent component. Here are the most common solutions:

1. Convert to a Controlled Component (Recommended) #

The cleanest approach is to lift the state up to the parent component, making the Toggle a controlled component. This means the parent manages the state and passes it down via props, along with a handler to update it.

Modified Toggle Component: #

export const Toggle = ({ isToggle, onToggle, theme, ...otherProps }) => {
  const handleClick = () => {
    onToggle(!isToggle)
  }
  return (
    <StyledToggle isToggle={isToggle} theme={theme} {...otherProps} onClick={handleClick}>
    </StyledToggle>
  )
}

Usage in Parent Component: #

import { Toggle } from 'something'
import { useState } from 'react'

const ParentComponent = () => {
  const [isToggle, setIsToggle] = useState(false) // State lives in the parent now

  const handleToggle = (newValue) => {
    setIsToggle(newValue)
    // You can run any logic with the updated state here
  }

  return (
    <div>
      <Toggle isToggle={isToggle} onToggle={handleToggle} />
      <p>Current Toggle State: {isToggle ? 'On' : 'Off'}</p>
    </div>
  )
}

2. Add a State Change Callback #

If you want the Toggle to keep managing its own internal state but notify the parent when it updates, add a callback prop that triggers whenever isToggle changes.

Modified Toggle Component: #

export const Toggle = ({ initialValue = false, theme, onToggleChange, ...otherProps }) => {
  const [isToggle, setIsToggle] = useState(initialValue)

  const handleClick = () => {
    const newValue = !isToggle
    setIsToggle(newValue)
    // Notify parent of the state update
    if (onToggleChange) {
      onToggleChange(newValue)
    }
  }

  return (
    <StyledToggle isToggle={isToggle} theme={theme} {...otherProps} onClick={handleClick}>
    </StyledToggle>
  )
}

Usage in Parent Component: #

import { Toggle } from 'something'
import { useState } from 'react'

const ParentComponent = () => {
  const [syncedToggleState, setSyncedToggleState] = useState(false)

  return (
    <div>
      <Toggle 
        initialValue={false}
        onToggleChange={(newValue) => {
          setSyncedToggleState(newValue)
          // React to the state change immediately here
        }} 
      />
      <p>Toggle State from Callback: {syncedToggleState ? 'On' : 'Off'}</p>
    </div>
  )
}

3. Expose State via useImperativeHandle (Not Recommended) #

You can use useImperativeHandle with a ref to expose internal state to the parent, but this breaks component encapsulation and is generally discouraged unless you have no other option.

Modified Toggle Component: #

import { useState, useImperativeHandle, forwardRef } from 'react'

export const Toggle = forwardRef(({ initialValue = false, theme, ...otherProps }, ref) => {
  const [isToggle, setIsToggle] = useState(initialValue)

  // Expose state and methods to the parent ref
  useImperativeHandle(ref, () => ({
    getIsToggle: () => isToggle,
    toggleManually: () => setIsToggle(!isToggle)
  }))

  const handleClick = () => {
    setIsToggle(!isToggle)
  }

  return (
    <StyledToggle isToggle={isToggle} theme={theme} {...otherProps} onClick={handleClick}>
    </StyledToggle>
  )
})

Usage in Parent Component: #

import { Toggle } from 'something'
import { useRef } from 'react'

const ParentComponent = () => {
  const toggleRef = useRef(null)

  const checkToggleState = () => {
    if (toggleRef.current) {
      console.log('Current Toggle State:', toggleRef.current.getIsToggle())
    }
  }

  return (
    <div>
      <Toggle ref={toggleRef} initialValue={false} />
      <button onClick={checkToggleState}>Check Toggle State</button>
    </div>
  )
}

4. Use a State Management Library (For Complex Apps) #

If you're building a larger app with multiple components that need access to shared state, consider using a state management library like Redux, Zustand, or Jotai. These tools let you store state globally and access it from any component, eliminating the need to pass props down through multiple levels.

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