Javascript 向页面添加新元素

所以，我还没有反应过来，所以我还是不太确定自己在做什么。我有一个纯粹使用HTML、JQuery和CSS的项目，但我正在尝试将其转换为react。我有一个带有复选框的页面，单击这些复选框时，会添加一个div，其中包含链接，如果未选中，则会删除该div：

if(element.checked != false) {
        $('.links').append('<div id="social">\
                              <p>\
                                 <a href = "https://instagram.com/" id="instagram">Instagram</a>\n\
                                 <button type="button" id="instagram" onclick="removeInstagram()">-</button>\
                              </p>\
                              <p>\
                                 <a href= "https://facebook.com/" id="facebook">Facebook</a>\n\
                                 <button type="button" id="facebook" onclick="removeFacebook()">-</button>\
                              </p>\
                              <p>\
                                 <a href= "https://twitter.com/" id="twitter">Twitter</a>\n\
                                 <button type="button" id="twitter" onclick="removeTwitter()">-</button>\
                              </p>\
                              <p>\
                                 <a href= "https://youtube.com/" id="youtube">Youtube</a>\n\
                                 <button type="button" id="youtube" onclick="removeYoutube()">-</button>\
                              </p>\
                           </div>');
    }
    else if(element.checked != true) {
       $("#social").remove();
    }

if（element.checked！=false）{
$（'.links'）。追加（'\
\
\n\
-\
\
\
\n\
-\
\
\
\n\
-\
\
\
\n\
-\
\
');
}
else if（element.checked！=true）{
$（“#社交”）.remove（）；
}

我试图将其转化为组件内部的React，但我不确定是否正确。我已将功能链接到我的复选框，但我不知道单击时如何添加/删除链接：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { findDOMNode } from "react-dom";
import $ from "jquery";

export default class LoginPage extends Component {
    render() {
        return (
            <div id="container">
                <section className="presets">
                    <div>
                        <label for="item1">Social Media:</label>
                        <input
                            type="checkbox"
                            name="item1"
                            id="item1"
                            onChange={this.socialMedia.bind(this)}
                        />
                    </div>
                    <div>
                        <label for="item2">Tech:</label>
                        <input
                            type="checkbox"
                            name="item2"
                            id="item2"
                            onChange="toggleTech(this)"
                        />
                    </div>
                    <div>
                        <label for="item3">Sports:</label>
                        <input
                            type="checkbox"
                            name="item3"
                            id="item3"
                            onChange="toggleSports(this)"
                        />
                    </div>
                    <div>
                        <label for="item4">News:</label>
                        <input
                            type="checkbox"
                            name="item4"
                            id="item4"
                            onChange="toggleNews(this)"
                        />
                    </div>
                    <div>
                        <label for="item5">Games:</label>
                        <input
                            type="checkbox"
                            name="item5"
                            id="item5"
                            onChange="toggleGames(this)"
                        />
                    </div>
                    <div>
                        <label for="item3">School:</label>
                        <input
                            type="checkbox"
                            name="item6"
                            id="item6"
                            onChange="toggleSchool(this)"
                        />
                    </div>
                    <div>
                        <button
                            type="button"
                            id="custom"
                            onClick="customHandler(this)"
                        >
                            Add Custom Site
                        </button>
                    </div>
                </section>

                <section className="links"></section>
            </div>
        );
    }


    // Social(element) {
    //     if (element.checked != false) {
    //         $(".links").append(
    //             '<div id="social">\
    //                           <p>\
    //                              <a href = "https://instagram.com/" id="instagram">Instagram</a>\n\
    //                              <button type="button" id="instagram" onclick="removeInstagram()">-</button>\
    //                           </p>\
    //                           <p>\
    //                              <a href= "https://facebook.com/" id="facebook">Facebook</a>\n\
    //                              <button type="button" id="facebook" onclick="removeFacebook()">-</button>\
    //                           </p>\
    //                           <p>\
    //                              <a href= "https://twitter.com/" id="twitter">Twitter</a>\n\
    //                              <button type="button" id="twitter" onclick="removeTwitter()">-</button>\
    //                           </p>\
    //                           <p>\
    //                              <a href= "https://youtube.com/" id="youtube">Youtube</a>\n\
    //                              <button type="button" id="youtube" onclick="removeYoutube()">-</button>\
    //                           </p>\
    //                        </div>'
    //         );
    //     } else if (element.checked != true) {
    //         $("#social").remove();
    //     }
    // }
}

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“react dom”导入{findDOMNode}；
从“jquery”导入$；
导出默认类LoginPage扩展组件{
render（）{
返回(
社会化媒体：
技术：
体育：
新闻:
游戏：
学校：
添加自定义站点
);
}
//社会（要素）{
//如果（element.checked！=false）{
//$（“.links”）.append(
//             '\
//\
//\n\
//                              -\
//
\
//\
//\n\
//                              -\
//
\
//\
//\n\
//                              -\
//
\
//\
//\n\
//                              -\
//
\
//                        '
//         );
//}else if（element.checked！=true）{
//$（“#社交”）.remove（）；
//     }
// }
}

---

如果您对此有任何帮助，我们将不胜感激，我将使用MERN堆栈。

您应该使用状态和三元表达式。应该是这样的： 在使用react时，不应使用jquery更改DOM

import React, { Component } from "react";

export default class LoginPage extends Component {
  constructor(){
    super();
    this.state ={
      isElementChecked: false
    }
  }
    render() {
        return (
            <div id="container">
                <section className="presets">
                    <div>
                        <label for="item1">Social Media:</label>
                        <input
                            type="checkbox"
                            name="item1"
                            id="item1"
                            checked={this.state.isElementChecked}
                            onChange={this.setState({isElementChecked: !this.state.isElementChecked})}
                        />
                    </div>
                    <div>
                        <label for="item2">Tech:</label>
                        <input
                            type="checkbox"
                            name="item2"
                            id="item2"
                            onChange="toggleTech(this)"
                        />
                    </div>
                    <div>
                        <label for="item3">Sports:</label>
                        <input
                            type="checkbox"
                            name="item3"
                            id="item3"
                            onChange="toggleSports(this)"
                        />
                    </div>
                    <div>
                        <label for="item4">News:</label>
                        <input
                            type="checkbox"
                            name="item4"
                            id="item4"
                            onChange="toggleNews(this)"
                        />
                    </div>
                    <div>
                        <label for="item5">Games:</label>
                        <input
                            type="checkbox"
                            name="item5"
                            id="item5"
                            onChange="toggleGames(this)"
                        />
                    </div>
                    <div>
                        <label for="item3">School:</label>
                        <input
                            type="checkbox"
                            name="item6"
                            id="item6"
                            onChange="toggleSchool(this)"
                        />
                    </div>
                    <div>
                        <button
                            type="button"
                            id="custom"
                            onClick="customHandler(this)"
                        >
                            Add Custom Site
                        </button>
                    </div>
                </section>

                <section className="links">
                {this.state.isElementChecked? <div id="social">
                <p>
                   <a href = "https://instagram.com/" id="instagram">Instagram</a>
                   <button type="button" id="instagram" onclick="removeInstagram()">-</button>\
                </p>
                <p>
                   <a href= "https://facebook.com/" id="facebook">Facebook</a>
                   <button type="button" id="facebook" onclick="removeFacebook()">-</button>\
                </p>
                <p>
                   <a href= "https://twitter.com/" id="twitter">Twitter</a>
                   <button type="button" id="twitter" onclick="removeTwitter()">-</button>\
                </p>
                <p>
                   <a href= "https://youtube.com/" id="youtube">Youtube</a>
                   <button type="button" id="youtube" onclick="removeYoutube()">-</button>\
                </p>
             </div> : null}
                </section>
            </div>
        );
    }


}

从“React”导入React，{Component}；
导出默认类LoginPage扩展组件{
构造函数（）{
超级（）；
这个州={
isElementChecked:错误
}
}
render（）{
返回(
社会化媒体：
技术：
体育：
新闻:
游戏：
学校：
添加自定义站点
{this.state.isElementChecked？

-\


-\


-\


-\

：null}
);
}
}

尝试使用func comp和useState

export const LoginPage=（）=>{
const[isChecked，setIsChecked]=useState（false）；
返回(
社会化媒体：
setIsChecked（！isChecked）}
/>
技术：
体育：
新闻:
游戏：
学校：
添加自定义站点
{被检查了吗？

-\


-\


-\


-\

：null}
);
}