如何在reactjs中重构包含多个具有相同类的div的代码？

Question

我希望所有通知消息都具有相同的外观。我有一个父组件，两个子组件为其呈现不同的消息...一个普通消息，另一个组件根据上下文显示消息。

下面是代码，

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 组件的通知。这也将为正常和上下文消息创建容器。但后来我正在寻找其他方法来做到这一点。重构它或干净的方式来做它。

有人可以帮我解决这个问题吗？谢谢。

Answer 1

让通知成为一个独立的组件怎么样？这样一来，您就不会在单个组件上嵌套那么多 div。