javascript - 如何将一个文件中的组件链接到另一个文件中的组件？

Question

假设我有一个带有按钮的组件(header.jsx)。单击该按钮时，我想打开一个使用 Material UI 创建的对话框。该对话框组件位于另一个我称为dialog.jsx 的文件中。我知道如何在一个文件中完成这一切:只需创建一个链接到按钮的函数并调用对话框标记上的显示事件。但是，如果我要将这两个组件分成单独文件中的组件，我该如何实现这一点？

Answer 1

您可以使用ReactDom.render方法在特定操作上渲染组件

假设我有像这样的dialog.jsx

var Dialog=React.createClass({
 //render function goes here
});
module.exports=Dialog

我想在按钮单击时使用此组件，那么您的父组件应该像

var parent=React.createClass({
click:function()
{
 ReactDom.render(<Dialog />,document.getElementById("child");
},
render:function()
{
 return(
   <div>
    <div id="child">
    <div>
    <button onClick={this.click} />
   </div>
  )
}
});

希望这对你有帮助