html - 如何在 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 container、main、notification 的 div。我想在带有类名 notification_info 的 div 之前将与 child2 中相同的 div 添加到 child1 中。

<div className="container">
    <div className="main">
        <div className="notification">

我尝试做的是创建三个 div，其中包含类名容器、main、child1 组件的通知。这也将为普通消息和上下文消息创建容器。但是后来我正在寻找其他方法来做到这一点。重构它或干净的方式来做它。

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

Answer 1

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