Reactjs 获取警告错误：验证<；的DOM嵌套子体；p>；
我面临着这个问题。我附加了代码，错误在DOM中。试图用各种方法和方式解决问题，但无法解决。Reactjs 获取警告错误：验证<；的DOM嵌套子体；p>；,reactjs,react-redux,react-router,Reactjs,React Redux,React Router,我面临着这个问题。我附加了代码，错误在DOM中。试图用各种方法和方式解决问题，但无法解决。 我不知道为什么会有DOM嵌套，我不理解代码中的确切问题。有人能帮忙解决这个问题吗 import React，{useRef，useState}来自“React”； 从“反应化身编辑器”导入化身编辑器； 从“@material ui/core/Avatar”导入化身； 从“@material ui/core/styles”导入{MuiThemeProvider}”； 从“@material ui/core
我不知道为什么会有DOM嵌套，我不理解代码中的确切问题。有人能帮忙解决这个问题吗
import React，{useRef，useState}来自“React”；
从“反应化身编辑器”导入化身编辑器；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/styles”导入{MuiThemeProvider}”；
从“@material ui/core/Slider”导入滑块；
从“@material ui/core”导入{Grid，Button，Paper}”；
从“@material ui/icons/Image”导入ImageIcon；
导出默认函数映像（）{
常量[状态，设置状态]=使用状态({
cropperOpen:错，
img:null，
删除：“，
缩放：1，
croppedImg:“，
});
const editorRef=useRef（null）；
const inputRef=useRef（null）；
函数handleZoomSlider（事件、值）{
setState（（prev）=>（{…prev，缩放：值}））；
}
函数handleRemove（）{
setState（（prev）=>（{…prev，cropedimg:null}）；
}
功能手柄文件更改（e）{
window.URL=window.URL | | window.webkitURL；
让url=window.url.createObjectURL（e.target.files[0]）；
inputRef.current.value=“”；
setState（（prev）=>（{…prev，img:url，crapperopen:true}）；
}
函数handleCancel（）{
setState（（prev）=>（{…prev，cropperOpen:false}）；
}
函数handleSave（）{
如果（编辑引用当前）{
const canvascaled=editorRef.current.getImageScaledToCanvas（）；
const cropedimg=canvascaled.toDataURL（）；
setState（（prev）=>（{…prev，cropperOpen:false，cropperimg}））；
}
}
返回(
上传图像
删除图像
{state.cropperOpen&&(
创建配置文件图像
取消
拯救
)}
);
}
主题主题import React, { useRef, useState } from "react";
import AvatarEditor from "react-avatar-editor";
import Avatar from "@material-ui/core/Avatar";
import {MuiThemeProvider} from "@material-ui/core/styles";
import Slider from "@material-ui/core/Slider";
import { Grid, Button, Paper } from "@material-ui/core";
import ImageIcon from "@material-ui/icons/Image";
export default function Image() {
const [ state, setState ] = useState({
cropperOpen: false,
img: null,
remove: "",
zoom: 1,
croppedImg: "",
});
const editorRef = useRef(null);
const inputRef = useRef(null);
function handleZoomSlider(event, value) {
setState((prev) => ({ ...prev, zoom: value }));
}
function handleRemove() {
setState((prev) => ({ ...prev, croppedImg: null }));
}
function handleFileChange(e) {
window.URL = window.URL || window.webkitURL;
let url = window.URL.createObjectURL(e.target.files[0]);
inputRef.current.value = "";
setState((prev) => ({ ...prev, img: url, cropperOpen: true }));
}
function handleCancel() {
setState((prev) => ({ ...prev, cropperOpen: false }));
}
function handleSave() {
if (editorRef.current) {
const canvasScaled = editorRef.current.getImageScaledToCanvas();
const croppedImg = canvasScaled.toDataURL();
setState((prev) => ({ ...prev, cropperOpen: false, croppedImg }));
}
}
return (
<MuiThemeProvider>
<Grid container spacing={2} alignItems="center">
<Grid item xs={2} sm={2} md={2} lg={2} xl={2}>
<Avatar style={{ width: "90px", height: "90px" }} src={state.croppedImg} />
</Grid>
<Grid item xs={5} sm={5} md={4} lg={4} xl={3}>
<input
accept="image/*"
ref={inputRef}
onChange={handleFileChange}
id="Upload an Image"
type="file"
multiple
hidden
/>
<label htmlFor="Upload an Image">
<Button fullWidth variant="contained" color="secondary" component={"span"}>
Upload an Image
</Button>
</label>
</Grid>
<Grid item xs={5} sm={5} md={4} lg={3} xl={3}>
<input accept="image/*" onChange={handleRemove} id="Remove Image" multiple hidden />
<label htmlFor="Remove Image">
<Button fullWidth variant="outlined" color="secondary" component={"span"} onClick={handleRemove}>
Remove Image
</Button>
</label>
</Grid>
</Grid>
{state.cropperOpen && (
<Paper
style={{
position: "absolute",
left: "440px",
right: "100px",
top: "100px",
width: "30%",
background: "rgba(200,200,200,.8)",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
zIndex: "1",
}}
>
<Grid container justify="center">
<Grid
item
xs={12}
style={{
fontFamily: "Campaign",
fontSize: "20px",
fontWeight: "bold",
fontStretch: "normal",
fontStyle: "normal",
lineHeight: "1.6",
letterSpacing: "normal",
textAlign: "center",
color: "#181d1e",
height: "60px",
padding: "20px",
background: "#FFFFFF",
}}
>
<span>Create Profile Image</span>
</Grid>
</Grid>
<AvatarEditor
ref={editorRef}
image={state.img}
width={370}
height={400}
disableBoundaryChecks={true}
disableHiDPIScaling={true}
opacity={10}
border={1}
color={[ 255, 255, 255, 0.6 ]}
scale={state.zoom}
borderRadius={200}
/>
<Grid container justify="center" style={{ background: "rgba(255,255,255,0.8)" }}>
<Grid item xs={8} display="flex" justify="center" alignItems="center" container height="55px">
<ImageIcon />
<Slider
min={1}
max={10}
step={0.1}
value={state.zoom}
onChange={handleZoomSlider}
style={{ width: "150px", marginLeft: "10px" }}
/>
<ImageIcon fontSize="large" />
</Grid>
</Grid>
<Grid
container
justify="space-evenly"
alignItems="center"
style={{ background: "#FFFFFF", height: "60px" }}
>
<Grid item xs={5} sm={5}>
<Button
fullWidth
type="button"
variant="outlined"
color="primary"
onClick={handleCancel}
width="100%"
>
Cancel
</Button>
</Grid>
<Grid item xs={5} sm={5}>
<Button
fullWidth
type="button"
variant="contained"
color="secondary"
onClick={handleSave}
width="100%"
>
Save
</Button>
</Grid>
</Grid>
</Paper>
)}
</MuiThemeProvider>
);
}