我正在使用react-three-renderer加载一些3d对象。我希望它创建的画布具有特定的ID，但是我似乎找不到在哪里创建它的画布。
无论我将id应用于render()的哪个位置，它都会不断抛出以下错误消息：
Warning: Foreign prop id found in react3.
react3，scene和PerspectiveCamera元素中的错误。
渲染器正在创建画布，例如
<canvas width="1731" height="1209" style="width: 1731px; height: 1209px;"></canvas>
我需要的地方，
<canvas id="mycanvas" width="1731" height="1209" style="width: 1731px; height: 1209px;"></canvas>
答案 0 :(得分：0)
您不应使用ID来指代React创建的元素-实际上，在您的情况下，如果不更改react3（react-three-renderer所使用的）的核心功能，这是不可能的。
您应该改为使用refs-更多信息，请点击此处：https://www.javascriptstuff.com/use-refs-not-ids/
答案 1 :(得分：0)
您不能使用router.delete("/:userId/:documentId",(req, res, next)=>{
let ObjectId = mongoose.Types.ObjectId;
if(!ObjectId.isValid(req.params.documentId))
res.status(200).json({
statusCode: 400,
message:"Invalid Types Id."
});
Documents.findById({_id:req.params.documentId,user_id:req.params.userId}, function(err, result) {
if(err) {
console.log(err);
}
filesystem.unlink("uploads/documents/user_id/_id"+result+".md", function(err) {
if(err) {
console.log(err);
} else {
console.log("Deleted the file: " + result +".md");
}
});
});
});
，而应该使用id
React.createRef()此对canvas元素的引用具有一个import React from 'react';
import THREE from 'three';
class WebGLLayer extends React.Component {
canvasRef = React.createRef();
componentDidMount() {
// This will have a reference to the <canvas> element
console.log(this.canvasRef.current);
// You can assign it to your WebGLRenderer as follows:
this.renderer = new THREE.WebGLRenderer({
canvas: this.canvasRef.current,
alpha: true,
depth: false,
});
}
onWindowResize() {
// Renderer will remember its canvas on setsize()
this.renderer.setSize(window.innerWidth, window.innerHeight);
}
render() {
return (
<canvas ref={this.canvasRef} className="canvasClass" />
);
}
}
属性，该属性是呈现的.current DOM元素，并且可以在<canvas>上使用。然后，您可以将此引用分配为componentDidMount()的画布。