React技术问题：如何将图片Props传递给文本组件？

return (<TextBox />)

嘿，我来帮你解决这个问题！你现在的核心问题是<TextBox />里的./README.md点击后没反应，没法触发图片显示，本质上是需要让文本组件能接收图片相关的Props，并且响应点击事件来触发图片渲染对吧？我给你梳理一套可行的实现方案：

1. 给

return (<TextBox />)

添加点击监听与路径识别逻辑 #

首先要让<TextBox />具备检测点击内容的能力，同时接收图片Props，这样当用户点击目标路径时，能把图片信息传递出去触发渲染。

// TextBox组件实现
function TextBox({ content, onPathClick, imageProps }) {
  const handleContentClick = (e) => {
    // 获取用户点击的文本内容
    const clickedText = e.target.textContent.trim();
    
    // 匹配目标路径（这里可以根据你的需求调整匹配规则）
    if (clickedText === './README.md') {
      // 触发父组件的回调，传递图片Props
      onPathClick(imageProps);
    }
  };

  return (
    <div 
      onClick={handleContentClick}
      style={{ 
        padding: '1rem', 
        border: '1px solid #eee', 
        cursor: 'pointer',
        minHeight: '100px'
      }}
    >
      {content}
    </div>
  );
}

2. 在父组件中串联整个流程 #

父组件需要维护文本内容、图片显示状态，同时把图片Props传递给<TextBox />，并处理各个组件的回调事件：

// 父组件（比如App.js）
import { useState } from 'react';
import FileTree from './FileTree';
import TextBox from './TextBox';

function App() {
  // 维护TextBox的显示内容
  const [textContent, setTextContent] = useState('');
  // 控制图片是否显示
  const [isImageVisible, setIsImageVisible] = useState(false);
  // 图片的Props（可以根据你的实际需求调整）
  const morpheusImageProps = {
    src: './path/to/morpheus-image.jpg',
    alt: 'Morpheus',
    style: { width: '300px', marginTop: '1rem' }
  };

  // 处理FileTree中README.md的点击事件
  const handleFileTreeItemClick = (fileName) => {
    if (fileName === 'README.md') {
      setTextContent('./README.md');
      setIsImageVisible(false); // 切换文件时隐藏图片
    }
  };

  // 处理TextBox中路径的点击事件，显示图片
  const handlePathClick = (imageProps) => {
    setIsImageVisible(true);
    // 如果需要动态切换图片，可以在这里更新图片Props
    // setMorpheusImageProps(newProps);
  };

  return (
    <div style={{ padding: '2rem', display: 'flex', gap: '2rem' }}>
      <FileTree onItemClick={handleFileTreeItemClick} />
      <div>
        <TextBox 
          content={textContent} 
          onPathClick={handlePathClick} 
          imageProps={morpheusImageProps} 
        />
        {/* 根据状态渲染图片 */}
        {isImageVisible && <img {...morpheusImageProps} />}
      </div>
    </div>
  );
}

export default App;

3. 可选优化：通用路径匹配 #

如果你的应用里有多个文件路径需要处理，不要硬编码./README.md，可以用正则表达式匹配通用的相对路径格式：

// 在TextBox的handleContentClick中替换判断逻辑
const relativePathRegex = /^\.\/[a-zA-Z0-9-_]+\.[a-zA-Z0-9]+$/;
if (relativePathRegex.test(clickedText)) {
  onPathClick(imageProps);
}

这样整个流程就通了：点击<FileTree />里的README.md → <TextBox />显示./README.md → 点击这个路径 → 父组件收到图片Props并触发图片显示，完全符合你的预期流程。

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