我是 ReactJS 的新手，我想知道我们是否重用已经创建的 React.Component (由 new 运算符(operator))在 render 内方法。例如 -
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="react.16.8.6.development.js"></script>
<script src="react-dom.16.8.6.development.js"></script>
<script src="babel.7.5.4.min.js"></script>
</head>
<body>
<br>
<h3>Enter number in box for multiplication.</h3>
<br>
<div id="container"></div>
<script type="text/babel">
class ResultComp extends React.Component{
constructor(props){
super(props)
this.state = {valueOne : 0, valueTwo : 0, product : 0}
}
render(){
console.log("ResultComp : render")
return(
<div>Result = {this.state.product}</div>
)
}
}
class MyApp extends React.Component{
render(){
console.log("MyApp : render")
var alreadyCreatedComponent = new ResultComp()
return (
<div>
<ResultComp id="0"/>
<alreadyCreatedComponent id="2"/>
<br/>
</div>
)
}
}
ReactDOM.render(
<MyApp/>,
document.getElementById("container")
)
</script>
</body>
</html>
这里 - <ResultComp id="0"/>正在工作。
但是，我们可以制作类似 <alreadyCreatedComponent id="2"/> 的东西吗？ ？
我需要这样做，因为我需要传递相同的 alreadyCreatedComponent到其他一些功能。
最佳答案
这就是 React JS 的用途。您不需要以下内容:
var alreadyCreatedComponent = new ResultComp()
相反，您可以做的是:
return (
<div>
<ResultComp id="0"/>
<ResultComp id="2"/>
<br/>
</div>
);
但是如果您想使用相同的状态值，则必须在父组件中向上移动状态位置并将它们作为 Prop 传递。
这就是 React JS 中组件的重用。
关于javascript - React.Component - 重用由 `new` 运算符创建的组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57019717/