Question

假设我有一个有按钮的组件（header.jsx）。单击该按钮时，我想打开我使用Material UI创建的Dialog。这个对话框组件在另一个名为dialog.jsx的文件中。我知道如何在一个文件中完成所有操作：只需创建一个链接到按钮的函数，并在对话框标记上调用show事件。但是，如果我将这两个分成单独文件中的组件，我该如何实现呢？

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

希望这可以帮到你

Answer 2

这样做....

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

Answer 3

您可以通过将ref道具传递给Dialog组件来完成您要执行的操作。然后，您可以通过引用Dialog组件中的this.refs对象来调用Parent组件上的方法。这是一个CodePen，显示了这一点。 http://codepen.io/anon/pen/pgNVpa显然，CodePen中的代码都在一个文件中。以下是如何在多个文件中执行此操作。

现在，仅仅因为你可以这样做并不意味着你应该这样做。我会建议@HaZardouS采用他的答案。这是经典的React模式。在React文档中，他们警告不要过度使用refs。

https://facebook.github.io/react/docs/more-about-refs.html

如果您还没有使用React编写多个应用程序，那么您的第一个应用程序倾向通常是尝试使用refs“制造东西发生在你的应用程序中。如果是这种情况，请花一点时间思考更多批判性的关于组件中应该拥有哪个州层次结构。通常，很明显，“拥有”的适当位置 state在层次结构中处于更高级别。把国家放在那里经常消除任何使用refs“让事情发生”的愿望 - 相反，数据流通常会实现您的目标。

<强> 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;

<强> Parent.jsx

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

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

3 个答案: