html - 如何在reactjs中重构包含多个具有相同类的div的代码?
问题描述
我希望所有通知消息都具有相同的外观。我有一个父组件,两个子组件为其呈现不同的消息……一个普通消息,另一个组件根据上下文显示消息。
下面是代码,
class Parent extends React.Component {
constructor(props) {
super(props);
this.element = document.createElement('div');
this.element.className= 'wrapper';
}
componentDidMount() {
root.appendChild(this.element);
}}
class Child1 extends React.Component {
render = () => {
return (
<div onClick={this.close} className="notification_info">
soemthing
</div>);}}
class Child2 extends React.Component {
render = () => {
<div>
<h2>Debug</h2>
</div>}
let content;
if (content) {
return (
<div className="container">
<div className="main">
<div className="notification">
<div className="notification_info">{content}
</div>
</div>
</div>
<div className="close"><SvgClose width="28" /></div>
</div>);}}}
我想为 child1 和 child2 组件创建三个带有 className 容器、main、通知的 div。我想将与 child2 中相同的 div 添加到 child1 以及在具有类名 notification_info 的 div 之前。
<div className="container">
<div className="main">
<div className="notification">
我尝试做的是创建三个带有类名容器的 div,main,以及 child1 组件的通知。这也将为正常和上下文消息创建容器。但后来我正在寻找其他方法来做到这一点。重构它或干净的方式来做它。
有人可以帮我解决这个问题。谢谢。
解决方案
让通知成为独立组件怎么样?这样,您就不会在单个组件上嵌套那么多 div。
推荐阅读
- javascript - 我可以将道具作为函数参数传递,或者这是一种不好的做法吗?
- firebase - Firebase Crashlytics 不会连接到同一项目中的辅助 Xamarin Android 应用程序
- php - 创建签名 url 以从 s3 存储桶获取文件时出错?
- android - PlacePicker 于 2019 年 11 月立即打开和关闭
- ubuntu - 无法在 Ubuntu 19.10 上启动设置(gnome-control-center)
- python - 使用现有 ODBC 配置凭据的 pyodbc 连接
- mysql - 从mysql中的另一个表创建用户名
- excel - 在将值与设置变量进行比较后,如何使此宏创建新工作表?
- javascript - 如何在 ReactNative 中将货币图标放在 TextInput 的值前面?
- android - 如何使用滚动片段容器实现通用布局?