내 채팅이 첫 번째 반응 앱 인스턴스에는 올바르게 표시되지만 두 번째에는 표시되지 않습니다. https://imgur.com/a/7FVCvjW
나는 무엇이 잘못되었는지 알아낼 수 없었다. 오른쪽 (이미지 공유)이 제대로 표시되지 않는 이유를 찾지 못했습니다.
export const Message = ({ message, name }) => {
const style = (sender) => {
if (sender === "admin") {
return "admin";
} else if (sender === name) {
return "user";
} else {
return "other";
}
};
return (
<Fragment>
<div className="messageContainer">
<p className={`content ${style(message.user)}`}>{message.message}</p>
{name === message.user ? null : (
<p className="sender">{message.user}</p>
)}
</div>
</Fragment>
);
};
CSS
.content {
margin-right: 10px;
}
.admin {
color: rgb(156, 156, 156);
}
.user {
background-color: rgba(255, 255, 255, 0.712);
display: inline;
padding: 10px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888888;
margin-left: auto;
}
.other {
background-color: rgba(255, 255, 255, 0.712);
display: inline;
padding: 10px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888888;
}
.messageContainer {
display: flex;
align-items: center;
}
.sender {
color: rgb(156, 156, 156);
}
다음을 제거하십시오.
if (sender === "admin") {
return "admin";
} else
이것을 사용하는 대신 플래그로 처리해야하는 name경우user = {name, isAdmin}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
<style type="text/css">
h3 {
color: white;
}
.content {
margin-right: 10px;
}
.admin {
color: rgb(156, 156, 156);
}
.user {
background-color: rgba(255, 255, 255, 0.712);
display: inline;
padding: 10px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888888;
margin-left: auto;
}
.other {
background-color: rgba(255, 255, 255, 0.712);
display: inline;
padding: 10px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888888;
}
.messageContainer {
display: flex;
align-items: center;
}
.sender {
color: rgb(156, 156, 156);
}
</style>
</head>
<body style="background: blue">
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const {Fragment} = React;
const Message = ({ message, name }) => {
const style = (sender) => {
// if (sender === "admin") {
// return "admin";
// } else
if (sender === name) {
return "user";
} else {
return "other";
}
};
return (
<Fragment>
<div className="messageContainer">
<p className={`content ${style(message.user)}`}>{message.message}</p>
{name === message.user ? null : (
<p className="sender">{message.user}</p>
)}
</div>
</Fragment>
);
};
const App = () => {
return (
<Fragment>
<h3>From Jonh's point of view</h3>
<ul>
<Message message={{user: "john", message: "Hi"}} name="john"/>
<Message message={{user: "mary", message: "Hey from user"}} name="john"/>
</ul>
<h3>From Mary's point of view</h3>
<ul>
<Message message={{user: "john", message: "Hi"}} name="mary"/>
<Message message={{user: "mary", message: "Hey from user"}} name="mary"/>
</ul>
<h3>From an anonymous point of view</h3>
<ul>
<Message message={{user: "john", message: "Hi"}} name=""/>
<Message message={{user: "mary", message: "Hey from user"}} name=""/>
</ul>
</Fragment>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다