Reactjs 反应Js钩子/道具。聊天机器人上的儿童

您好，我使用以下逻辑创建了一个简单的聊天机器人，但由于某些原因，我无法显示消息：

const ChatBot = () => {
  return (
    <Styled.ChatBox>
      <ChatMessage bot={true}>Hi.</ChatMessage>
      <ChatMessage bot={false}>Hello.</ChatMessage>
    </Styled.ChatBox>
  );
};

const ChatBot=（）=>{
返回(
你好
你好
);
};

这是我的聊天机器人：

function ChatMessage(props) {
  return (
    <Styled.ChatMessage bot={props.bot}>{props.children}</Styled.ChatMessage>
  );
}

ChatMessage.defaultProps = {
  bot: false,
};

const Chat = props => {
  console.log(props.children);
  return (
    <Styled.ChatBox>
      <Styled.ChatHeader />
      <Styled.ChatLog>{props.children}</Styled.ChatLog>
      <Styled.ChatInput>
        <textarea placeholder="aaaaa ..." rows={4} />
        <button>Send</button>
      </Styled.ChatInput>
    </Styled.ChatBox>
  );
};

功能聊天信息（道具）{
返回(
{props.children}
);
}
ChatMessage.defaultProps={
机器人：错，
};
const Chat=props=>{
console.log（props.children）；
返回(
{props.children}
发送
);
};

我真的不知道我做错了什么 我不知道我是用最好的方式还是用最好的逻辑做的 我有一个用样式的comp做的div 这将是根据道具机器人显示消息的位置 我将收到消息，但由于某些原因，我无法显示消息。 关于以下方面的例子：

---

实际上，您的

ChatBot/index.js

文件中缺少

导出默认ChatBot

。

---

您不是从

src/ChatBot/index.js

导出

ChatBot

，而是实际导出

Chat

：

import React from "react";
import { Chat, ChatMessage } from "./chat";
const ChatBot = () => {
  return (
    <Chat>
      <ChatMessage bot={true}>Hi.</ChatMessage>
      <ChatMessage bot={false}>Hello.</ChatMessage>
    </Chat>
  );
};

//export default Chat; // You're just exporting what you imported
export default ChatBot; // This is correct

你能帮我解决这个问题吗？