Javascript 如何在React中的切换开关组件内添加文本？

如何在ReactJS中的开关组件中添加文本？我试图在交换机组件中添加

EN

和

PT

文本

我没有使用任何库，我只使用css构建组件，因为我需要它来进行特定的定制，所以我发现使用css更容易

我把我的项目投入到

从“React”导入React；
导入“/switch.css”；
常量开关=（{isOn，handleToggle，onColor}）=>{
返回(
);
};
导出默认开关
.react开关复选框{
身高：0；
宽度：0；
可见性：隐藏；
}
.反应开关标签{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
光标：指针；
宽度：100px；
高度：50px；
背景：#fff；
位置：相对位置；
过渡：背景色0.2s；
}
.反应开关标签.反应开关按钮{
内容：“；
位置：绝对位置；
顶部：2个；
左：2px；
宽度：45px；
高度：45px；
过渡：0.2s；
背景：#000；
盒影：02px0rgba（10,10,10,0.29）；
}
.反应开关复选框：选中+.反应开关标签.反应开关按钮{
左：计算（100%-2px）；
转化：translateX（-100%）；
}
.反应开关标签：激活。反应开关按钮{
宽度：60px；
}
看看你的沙箱。
首先，我将
移动到
中，这样它就不需要
id
/
HTMLF的
结构，因为一旦使用多个开关，重复的id会导致结构中断

文本
span
s现在位于
标签内自己的
div
中。它们各有50%的宽度，分别与左右边缘对齐，并使用flexbox将其内容居中

根据复选框任一状态下白色区域的宽度，您可能需要更改跨距的宽度以正确居中文本。此外，标签文本可以移动到属性中以实现重用