如何通过功能之间的const usestate（“; quot”）

Question

我想将cont chatlog从主要功能聊天中拉出，并暂时将其插入聊天功能的组件或外部。问题是Chatlog需要在聊天功能中调用的usestate变量[msg，sendmsg]（..）。无论如何我该怎么做？是新手反应。

function Chats() {

const [msg, sendMsg] = useState("");
const [msgs1, sendMsgAll] = useState([]);

useEffect(() => {

    onValue(ref(database), (snapshot) => {
    sendMsgAll([]);

    const data = snapshot.val();          
        if (data !== null) {
            Object.values(data).map((msg) => {
                sendMsgAll((oldArray) => [...oldArray, msg]);         
        });
        }
    });
}, [])

const ChatLog = () => {
    return (
    <div>
    {msgs1.map((msg) => (
        <div className="chat-log">
                <p align = {checkSide(msg.usr)}>
                <h2>{msg.msg}</h2>
                <h4>User: {msg.usr}</h4>
                <h4>Time: {convertUnix(msg.time)}</h4>
                <button>update</button>
                <button>delete</button>
                </p>
            </div>
        ))}
    </div>
    )
}

return (
    <div className="ChatView">
    <p><ChatLog /></p>
    <p>{ChatInput()}</p>
    </div>
    )

};

Answer 1

您可以将道具添加到Chatlog组件中。检查一下...

 const ChatLog = (props) => {
    const {msg1} = props
    return (
    <div>
    {msgs1.map((msg) => (
        <div className="chat-log">
                <p align = {checkSide(msg.usr)}>
                <h2>{msg.msg}</h2>
                <h4>User: {msg.usr}</h4>
                <h4>Time: {convertUnix(msg.time)}</h4>
                <button>update</button>
                <button>delete</button>
                </p>
            </div>
        ))}
    </div>
    )
}

但是，使用组件时需要将道具添加到组件中。这样的事情...

return (
   <div className="ChatView">
     <p><ChatLog msg1={msg1} /></p>
     <p>{ChatInput()}</p>
   </div>
)

又一件事，当您声明组件时，必须将其声明为另一个组件。像这样

//this is ChatLog component
const ChatLog = (props)=>{
   return <div/>
}

//this is Chats component
const Chats = ()=>{
   return (
      <div>
        <ChatLog {...props}/>
      </div>
  )
}