hay un componente de chat (principal), pasa el valor de props, que almacena la identificación de datos, la id, img Id, chatName de chat en la conversación (secundaria), en la que se representan. el componente Conversation tiene un componente ConversationItem , es decir, Conversation es el padre de ConversationItem . El ImgId debe pasarse del componente Conversation al ConversationItem . para dibujarlo allí.

Aquí hay un ejemplo de mi código.

Charlar

 const Chat = () => { return ( <div className='app1'> <ConversationList/> { user.map(conversation => <Conversation key={conversation.id} data={conversation} /> ) } </div> ); } export default Chat;

Conversación

 export default function Conversation(props) { const {id, imgId, chatName} = props.data; const messages = JsonData; return ( <div> <div > <img src={imgId} /> </div> <div > {messages.map((message) => { return ( <ConversationItem message={message} imgId={imgId} key={message.mes_id}/>) } )} </div> </div> ); }

Elemento de conversación

 const ConversationItem = ({message}, imgId) => { return ( <div> <div className="img_cont_msg"> <img src={imgId.data}/> </div> <div classname = "msg-text"> {message.text_msg} </div> </div> ); }; export default ConversationItem;

por el momento, el código transmite algo y no genera un marcador de posición, sino un vacío. si lo hago

 <img src={imgId.data}/>

a

 <img src={imgId}/>

se mostrará la imagen de marcador de posición no encontrada. ¿Cómo implementarlo correctamente?