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>);}}}

我想用className容器，main，child1和child2组件的通知创建三个div。我也想在child1之前添加与child2类似的div，并在div之前添加类名notification_info。

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

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

有人可以帮我这个忙吗？谢谢。

Answer 1

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

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

1 个答案: