Javascript 组件-重用“new”操作符创建的组件_Javascript_Html_Reactjs

Javascript 组件-重用“new”操作符创建的组件

javascript html reactjs

Javascript 组件-重用“new”操作符创建的组件,javascript,html,reactjs,Javascript,Html,Reactjs,我是ReactJS新手，我想知道我们是否在render方法中重用已经创建的React.Component（通过new操作符）。例如— <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="react.16.8.6.developme

我是ReactJS新手，我想知道我们是否在

render

方法中重用已经创建的

React.Component

（通过

new

操作符）。例如—

<!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扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={valueOne:0，valueTwo:0，product:0}
}
render（）{
log（“ResultComp:render”）
返回(
结果={this.state.product}
)
}
}
类MyApp扩展了React.Component{
render（）{
console.log（“MyApp:render”）
var alreadyCreatedComponent=new ResultComp（）
返回(


)
}
}
ReactDOM.render(
,
document.getElementById（“容器”）
)

这里-

正在工作

但是，我们可以制作类似于

的东西吗

我需要这样做，因为我需要将相同的

alreadyCreatedComponent

传递给其他函数。

这就是React JS的用途。您不需要以下内容：

var alreadyCreatedComponent = new ResultComp()

相反，您可以做的是：

返回(


);

但是，如果要使用相同的状态值，则必须在父组件中向上移动状态位置，并将它们作为道具传递

这是React JS中组件的重用。

是的，很抱歉，我需要这样做，因为我需要将相同的alreadyCreatedComponent传递给其他函数。@CRSardar看起来你做错了什么。你有个XY问题。到目前为止，你所做的一切都很棒。你到底想做什么，让我来帮你。@CRSardar告诉我是否像你想的那样工作？这很好-但是，每次它都从

MyApp

开始重新渲染所有内容，因为我正在更改

MyApp

的状态。我希望它只重新呈现

ResultComp

。所以，我在想-