从 parent 传递道具到 child （而 child 是 parent 他自己）反应 js

Question

有一个Chat组件（parent），它传递了props的值，它存储了数据id, img Id, chatName 在 Conversation (child) 中呈现它们。 Conversation 组件有一个 ConversationItem 组件，也就是说，Conversation 是 parent ConversationItem。 ImgId 必须从 Conversation 组件传递到 ConversationItem。把它画在那里。

这是我的代码示例

聊天

const Chat = () => {
return (
    <div className='app1'>
        <ConversationList/>
        {
            user.map(conversation =>

                <Conversation
                    key={conversation.id}
                    data={conversation}
                />
            )
        }

    </div>
);
}
export default Chat;

对话

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>
        );
    }

对话项

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;

目前，代码传输了一些东西，但输出的不是占位符，而是空值。如果我这样做

<img src={imgId.data}/>

至

<img src={imgId}/>

将显示未找到的占位符图像。如何正确实施？

Answer 1

您没有正确解构 ConversationItem 组件中的道具。而是这样做：

const ConversationItem = ({ message, imgId }) => {

从 parent 传递道具到 child （而 child 是 parent 他自己）反应 js

passing props from parent to child (while the child is the parent himself) react js

javascript

reactjs