React技术实现：将数组内容通过Props传递至Div组件

Hey there! Let's walk through how to implement this React component interaction where clicking an array item sends its content to your TextBox component. Here's a clear, working approach based on your requirements:

Step 1: Refine the TextBox Component #

First, let's update your TextBox class component to accept external content via props and sync its state when the prop changes. This lets it respond to clicks from other components:

import React from 'react';

export class TextBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: props.initialContent || "Select A Node To See Its Data Structure Here..."
    };
  }

  // Update state when incoming selected content changes
  componentDidUpdate(prevProps) {
    if (prevProps.selectedContent !== this.props.selectedContent) {
      this.setState({ content: this.props.selectedContent });
    }
  }

  render() {
    return (
      <div className="text-box" style={{ padding: '16px', border: '1px solid #ddd', minWidth: '300px' }}>
        {this.state.content}
      </div>
    );
  }
}

Step 2: Build an Array Item List Component #

Next, create a component to render your array items. It will take a click handler prop to notify the parent when an item is clicked:

import React from 'react';

export const ItemList = ({ items, onItemClick }) => {
  return (
    <ul className="item-list" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
      {items.map((item, index) => (
        <li 
          key={index} 
          onClick={() => onItemClick(item)}
          style={{ cursor: 'pointer', padding: '10px', borderBottom: '1px solid #eee', hover: { background: '#f5f5f5' } }}
        >
          {item.label || item} {/* Adjust based on your actual array item structure */}
        </li>
      ))}
    </ul>
  );
};

Step 3: Parent Component to Manage State & Prop Flow #

Finally, the parent component (like your main App component) will hold the array data, track the selected item, and pass the necessary props to both child components:

import React, { useState } from 'react';
import { TextBox } from './TextBox';
import { ItemList } from './ItemList';

function App() {
  // Replace with your actual array data
  const arrayData = [
    { label: "Node 1", structure: "{ id: 1, type: 'folder', children: 3 }" },
    { label: "Node 2", structure: "{ id: 2, type: 'file', size: '4.2MB' }" },
    { label: "Node 3", structure: "{ id: 3, type: 'folder', children: [] }" }
  ];

  // State to track the selected item's content
  const [selectedContent, setSelectedContent] = useState(null);

  const handleItemClick = (item) => {
    // Pass the item's data structure (or any content you need) to TextBox
    setSelectedContent(item.structure);
  };

  return (
    <div className="app-container" style={{ display: 'flex', gap: '24px', padding: '20px' }}>
      <ItemList items={arrayData} onItemClick={handleItemClick} />
      <TextBox 
        initialContent="Select A Node To See Its Data Structure Here..."
        selectedContent={selectedContent}
      />
    </div>
  );
}

export default App;

Key Concepts Breakdown #

• Lifting State Up: The parent component manages the selectedContent state, acting as the single source of truth shared between the list (triggering updates) and TextBox (displaying updates).
• Callback Props: The onItemClick callback is passed from parent to list component, enabling child-to-parent communication when an item is clicked.
• Component Sync: The TextBox uses componentDidUpdate to react to changes in the selectedContent prop and update its internal state. If you prefer functional components, you could swap this out with a useEffect hook instead!

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