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

Question

Say I have a component (header.jsx) which has a button. When that button is clicked I want to open a Dialog that I created with Material UI. This dialog component is in another file I called dialog.jsx. I know how I could do it all in one file: simply create a function that is linked to the button and calls a show event on the dialog tag. However if I were to separate these two into components in separate files, how can I accomplish this?

Answer 1

you can user ReactDom.render method for rendering a component on a particular action

suppose I have dialog.jsx like

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

I want to use this component on button click then your parent component should be like

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

hope this may help you

Answer 2

Do it like this....

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

You can accomplish what you're trying to do by passing a ref prop to the Dialog component. You then can call methods on the Dialog component by reference to the this.refs object inside the Parent component. Here's a CodePen showing this in action. http://codepen.io/anon/pen/pgNVpa Obviously, the code in CodePen is all in one file. Below is how you would do it in multiple files.

Now, just because you can do this doesn't mean you should. I would recommend the approach @HaZardouS took in his answer. That's the classic React pattern. In the React docs, they caution against overuse of refs .

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

If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use refs to "make things happen" – instead, the data flow will usually accomplish your goal.

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