在聊天机器人上反应 Js Hooks / props.Children

Question

Hello I had the following logic to make a simple chat bot, but for some reason I am not able to display the messages:

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

and this is my 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>
  );
};

I'm really not able to identify what I did wrong and I don't know if I did it in the best way or with the best logic I have a div made with styled comp which will be where the messages will be displayed according to the prop bot and I will have the message, but for some reason I am not able to display the message. example on: https://codesandbox.io/s/eager-torvalds-fyi77

Answer 1

Actually you are missing export default ChatBot in your chatbot/index.js file.

Answer 2

You aren't exporting ChatBot from src/chatbot/index.js , you are actually exporting 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

If you change that it should work. See the example below. You will need to run the snippet in fullscreen since the messages will appear off-screen due to your styling.

 const {useState, useEffect, Fragment} = React; const {css} = styled; const messageBot = css` align-self: flex-start; background-color: #e0e0e0; `; const messageClient = css` align-self: flex-end; background-color: #ffffff; `; const ChatBox = styled.div` position: absolute; position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; width: 22em; height: 30em; border-radius: 6px; background-color: red; `; const ChatLog = styled.div` display: flex; flex-direction: column; width: 100%; overflow: auto; flex: 1 100%; background: blue; `; const ChatMessage = styled.div` margin: 1ex; padding: 1ex; border-radius: 2px; ${props => (props.bot ? messageBot : messageClient)} `; const ChatInput = styled.div` display: flex; padding: 1ex; max-height: 60px; height: 100%; background: yellow; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; flex: none; & > textarea { width: 100%; border: none; box-sizing: border-box; height: 60px; padding: 20px; flex: 1 1; resize: none; } `; const ChatHeader = styled.div` border-top-left-radius: 6px; border-top-right-radius: 6px; flex: none; background: green; height: 30px; `; const Styled = { ChatBox, ChatLog, ChatHeader, ChatInput, ChatMessage }; function ChatMessageCmp(props) { return ( <Styled.ChatMessage bot={props.bot}>{props.children}</Styled.ChatMessage> ); } ChatMessageCmp.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> ); }; const ChatBot = () => { return ( <Chat> <ChatMessageCmp bot={true}>Hi.</ChatMessageCmp> <ChatMessageCmp bot={false}>Hello.</ChatMessageCmp> </Chat> ); }; function App() { return <ChatBot />; } ReactDOM.render(<App />, document.getElementById("app"));

 .App { font-family: sans-serif; text-align: center; } body { padding: 0; margin: 0; }

 <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/styled-components@4.4.1/dist/styled-components.min.js"></script> <div id="app"></div>