Javascript 如何将组件从一个文件链接到另一个文件中的组件？

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

您可以使用

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>
  )
}
});

var parent=React.createClass({
单击：函数（）
{
ReactDom.render（，document.getElementById（“子”）；
},
render:function（）
{
返回(
)
}
});

---

希望这可以帮助您

您可以使用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>
  )
}
});

var parent=React.createClass({
单击：函数（）
{
ReactDom.render（，document.getElementById（“子”）；
},
render:function（）
{
返回(
)
}
});

希望这能帮助你像这样做

var React = import('react'),
Dialog = require("path.to.dialog.jsx"),

header = React.createClass({
    componentWillReceiveProps: function(){
        this.setState({"showDialog" : false});
    },
    onButtonClick : function(){
        this.setState({"showDialog" : true});
    },
    render: function(){
        return (
            <div>
                <Your other layout>
                    <Button text="Open dialog" click={this.onButtonClick} />
                </Your other layout>
                <Dialog show={this.state.showDialog} />
            </div>
        );
    }
});

var React=import（'React'），
Dialog=require（“path.to.Dialog.jsx”），
header=React.createClass({
componentWillReceiveProps:function（）{
this.setState（{“showDialog”：false}）；
},
onButtonClick:function（）{
this.setState（{“showDialog”：true}）；
},
render:function（）{
返回(
);
}
});

像这样做

var React = import('react'),
Dialog = require("path.to.dialog.jsx"),

header = React.createClass({
    componentWillReceiveProps: function(){
        this.setState({"showDialog" : false});
    },
    onButtonClick : function(){
        this.setState({"showDialog" : true});
    },
    render: function(){
        return (
            <div>
                <Your other layout>
                    <Button text="Open dialog" click={this.onButtonClick} />
                </Your other layout>
                <Dialog show={this.state.showDialog} />
            </div>
        );
    }
});

var React=import（'React'），
Dialog=require（“path.to.Dialog.jsx”），
header=React.createClass({
componentWillReceiveProps:function（）{
this.setState（{“showDialog”：false}）；
},
onButtonClick:function（）{
this.setState（{“showDialog”：true}）；
},
render:function（）{
返回(
);
}
});

通过将

ref

道具传递给

对话框

组件，您可以完成您想要做的事情。然后，您可以通过引用

父组件

中的

this.refs

对象来调用

对话框

组件上的方法。这是一个代码笔，显示了这一点。显然，代码在dePen全部在一个文件中。下面是如何在多个文件中执行此操作

现在，仅仅因为你可以这样做并不意味着你应该这样做。我建议@Hazardy在他的回答中采用这种方法。这是典型的反应模式。在React文档中，他们警告不要过度使用

refs

如果您尚未使用React编程多个应用程序，请首先 通常倾向于尝试使用ref来“制造事物” 在你的应用程序中“发生”。如果是这种情况，请花点时间多想想 批判性地讨论在组件中应该在何处拥有状态 等级制度。通常情况下，很明显，正确的“拥有”位置 状态位于层次结构中的更高级别。将状态放置在那里 通常消除了使用REF“使事情发生”的欲望- 相反，数据流通常会实现您的目标

Dialog.jsx

class Dialog extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      open: false
    };
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
  }

  open() {
    this.setState({
      open: true
    });
  }

  close() {
    this.setState({
      open: false
    });
  }

  render() {
    if (this.state.open) return <p>Dialog is open.</p>;
    else return <p>Dialog is closed.</p>
  }
}

export default Dialog;

import Dialog from './Dialog';

class Parent extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.openDialog = this.openDialog.bind(this);
    this.closeDialog = this.closeDialog.bind(this);
  }

  openDialog() {
    this.refs.dialog.open();
  }

  closeDialog() {
    this.refs.dialog.close();
  }

  render() {
    return (
      <div>
        <button onClick={this.openDialog}>Open Dialog</button>
        <button onClick={this.closeDialog}>Close Dialog</button>
        <Dialog ref="dialog" />
      </div>
    );
  }
}

React.render(<Parent />, document.querySelector('#react-app'));

类对话框扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
开放：假
};
this.open=this.open.bind（this）；
this.close=this.close.bind（this）；
}
开（）{
这是我的国家({
开放：是的
});
}
关闭（）{
这是我的国家({
开放：假
});
}
render（）{
如果（this.state.open）返回对话框打开。
；
否则返回对话框关闭

}
}
导出默认对话框；

Parent.jsx

class Dialog extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      open: false
    };
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
  }

  open() {
    this.setState({
      open: true
    });
  }

  close() {
    this.setState({
      open: false
    });
  }

  render() {
    if (this.state.open) return <p>Dialog is open.</p>;
    else return <p>Dialog is closed.</p>
  }
}

export default Dialog;

import Dialog from './Dialog';

class Parent extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.openDialog = this.openDialog.bind(this);
    this.closeDialog = this.closeDialog.bind(this);
  }

  openDialog() {
    this.refs.dialog.open();
  }

  closeDialog() {
    this.refs.dialog.close();
  }

  render() {
    return (
      <div>
        <button onClick={this.openDialog}>Open Dialog</button>
        <button onClick={this.closeDialog}>Close Dialog</button>
        <Dialog ref="dialog" />
      </div>
    );
  }
}

React.render(<Parent />, document.querySelector('#react-app'));

从“/Dialog”导入对话框；
类父类扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
this.openDialog=this.openDialog.bind（this）；
this.closeDialog=this.closeDialog.bind（this）；
}
openDialog（）{
this.refs.dialog.open（）；
}
closeDialog（）{
this.refs.dialog.close（）；
}
render（）{
返回(
打开对话框
关闭对话框
);
}
}
React.render（，document.querySelector（“#React app”）；

通过将

ref

道具传递给

对话框

组件，您可以完成您想要做的事情。然后，您可以通过引用

父组件

中的

this.refs

对象来调用

对话框

组件上的方法。这是一个代码笔，显示了这一点。显然，代码在dePen全部在一个文件中。下面是如何在多个文件中执行此操作

现在，仅仅因为你可以这样做并不意味着你应该这样做。我建议@Hazardy在他的回答中采用这种方法。这是典型的反应模式。在React文档中，他们警告不要过度使用

refs

如果您尚未使用React编程多个应用程序，请首先 通常倾向于尝试使用ref来“制造事物” 在你的应用程序中“发生”。如果是这种情况，请花点时间多想想 批判性地讨论在组件中应该在何处拥有状态 等级制度。通常情况下，很明显，正确的“拥有”位置 状态位于层次结构中的更高级别。将状态放置在那里 通常消除了使用REF“使事情发生”的欲望- 相反，数据流通常会实现您的目标

Dialog.jsx

class Dialog extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      open: false
    };
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
  }

  open() {
    this.setState({
      open: true
    });
  }

  close() {
    this.setState({
      open: false
    });
  }

  render() {
    if (this.state.open) return <p>Dialog is open.</p>;
    else return <p>Dialog is closed.</p>
  }
}

export default Dialog;

import Dialog from './Dialog';

class Parent extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.openDialog = this.openDialog.bind(this);
    this.closeDialog = this.closeDialog.bind(this);
  }

  openDialog() {
    this.refs.dialog.open();
  }

  closeDialog() {
    this.refs.dialog.close();
  }

  render() {
    return (
      <div>
        <button onClick={this.openDialog}>Open Dialog</button>
        <button onClick={this.closeDialog}>Close Dialog</button>
        <Dialog ref="dialog" />
      </div>
    );
  }
}

React.render(<Parent />, document.querySelector('#react-app'));

类对话框扩展了React.Component{
构造函数（道具、上下文）{