React下拉组件：选中对象回传父组件及默认值、兄弟传参问题

Hey there! Let's break down and solve your two React dropdown problems step by step.

1. Fixing the Default Value Display Issue #

It sounds like your dropdown is successfully passing the selected user object back to the parent, but the initial default value isn't rendering correctly. This usually happens because the dropdown component isn't properly initializing its state with the default value from the parent, or isn't syncing with prop updates if the parent changes the default later.

Solution for Class Components: #

First, make sure your parent component passes a defaultUser prop to the Dropdown component. Then, initialize the dropdown's state with this prop, and add a lifecycle method to update the state if the defaultUser prop changes.

Parent Component Code:

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedUser: { id: 1, name: "John Doe", avatar: "john.jpg" } // Your default user
    };
    this.handleUserSelect = this.handleUserSelect.bind(this);
  }

  handleUserSelect(selectedUser) {
    this.setState({ selectedUser });
  }

  render() {
    return (
      <div>
        <Dropdown 
          defaultUser={this.state.selectedUser} 
          onSelect={this.handleUserSelect} 
        />
        <UserIcon user={this.state.selectedUser} />
      </div>
    );
  }
}

Dropdown Component Code:

class Dropdown extends React.Component {
  constructor(props) {
    super(props);
    // Initialize state with the default user from props
    this.state = {
      selectedUser: props.defaultUser
    };
  }

  // Sync state if parent updates the defaultUser prop
  componentDidUpdate(prevProps) {
    if (prevProps.defaultUser !== this.props.defaultUser) {
      this.setState({ selectedUser: this.props.defaultUser });
    }
  }

  handleOptionSelect = (user) => {
    this.setState({ selectedUser: user }, () => {
      // Pass the selected user back to parent after state updates
      this.props.onSelect(this.state.selectedUser);
    });
  };

  render() {
    const { selectedUser } = this.state;
    return (
      <div className="dropdown">
        {/* Display the default/selected user */}
        <div className="dropdown-trigger">
          {selectedUser ? selectedUser.name : "Select a user"}
        </div>
        {/* Your dropdown list here, mapping over user options */}
        <div className="dropdown-list">
          {this.props.userOptions.map(user => (
            <div 
              key={user.id} 
              onClick={() => this.handleOptionSelect(user)}
              className={user.id === selectedUser.id ? "active" : ""}
            >
              {user.name}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

Solution for Functional Components (Bonus): #

If you're using hooks, you can use useState with the prop as the initial value, and useEffect to sync prop changes:

const Dropdown = ({ defaultUser, onSelect, userOptions }) => {
  const [selectedUser, setSelectedUser] = useState(defaultUser);

  useEffect(() => {
    setSelectedUser(defaultUser);
  }, [defaultUser]);

  const handleOptionSelect = (user) => {
    setSelectedUser(user);
    onSelect(user);
  };

  // Rest of the component render logic...
};

2. Passing Selected User Data to the Sibling UserIcon Component #

Since the parent component holds the source of truth for selectedUser, it's straightforward to pass the necessary data to the UserIcon sibling component via props. You can pass the entire user object, or just the specific fields (like avatar URL, username) that UserIcon needs.

Example Implementation: #

Parent Component (Updated):

class ParentComponent extends React.Component {
  // ... existing state and handleUserSelect method ...

  render() {
    const { selectedUser } = this.state;
    return (
      <div className="parent-container">
        <Dropdown 
          defaultUser={selectedUser} 
          onSelect={this.handleUserSelect} 
          userOptions={yourUserList} // Your full list of user options
        />
        {/* Pass only the needed data to UserIcon */}
        <UserIcon 
          avatarUrl={selectedUser?.avatar} 
          userName={selectedUser?.name} 
        />
      </div>
    );
  }
}

UserIcon Component:

const UserIcon = ({ avatarUrl, userName }) => {
  return (
    <div className="user-icon">
      <img src={avatarUrl} alt={userName} className="avatar" />
      <span className="user-name">{userName}</span>
    </div>
  );
};

This way, whenever the user selects an option from the dropdown, the parent's selectedUser state updates, which automatically passes the latest data to UserIcon via props.

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