Javascript 调用另一个组件

我正在使用索环，并试图让（几乎是一个模态）工作时，一个按钮被按下。我知道我的onClick是有效的，因为我尝试了一个简单的console.log，它可以工作。如果我使用ReactDOM并渲染它，MyModal也可以显示。我想我的问题与我如何称呼它或归还它有关？我希望在单击按钮时显示模式

MyModal.js

import React, { Component } from 'react';
import Layer from 'grommet/components/Layer';
import Header  from 'grommet/components/Header';
import Heading from 'grommet/components/Heading';
import Section from 'grommet/components/Section';
import Paragraph from 'grommet/components/Paragraph';

export default class MyModal extends Component {  
  render () {
    return (
        <Layer closer={true} align="top">
            <Header>
                <Heading tag="h2">
                    Title
                </Heading>
            </Header>
            <Section>
                <Paragraph>
                    This is a simple dialog.
                </Paragraph>
            </Section>
        </Layer>
    );
  }
};

import React，{Component}来自'React'；
从“索环/组件/层”导入层；
从“索环/组件/标题”导入标题；
从“索环/组件/标题”导入标题；
从“索环/部件/截面”导入截面；
从“索环/部件/段落”导入段落；
导出默认类MyModal扩展组件{
渲染（）{
返回(
标题
这是一个简单的对话框。
);
}
};

Main.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from 'grommet/components/App';
import Button from 'grommet/components/Button';
import MyModal from './components/MyModal';

export default class Main extends Component {
  getComponent(event) {
    return <MyModal/>;
  }
  render () {
    return (
      <App centered={false}>
           <Button onClick={this.getComponent.bind(this)} label="Action" />
      </App>
    );
  }
};

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“索环/组件/应用程序”导入应用程序；
从“索环/组件/按钮”导入按钮；
从“./components/MyModal”导入MyModal；
导出默认类主扩展组件{
getComponent（事件）{
返回；
}
渲染（）{
返回(
);
}
};

问题：
您正试图将模态呈现到一个内嵌的

onClick

处理程序中

建议的解决方案：

• 在显示模式时，在状态中设置要处理的值

• 设置

  onClick

  以切换此值

• 使用此状态调用render中的另一个方法以有条件地呈现模式

您的代码可以修改为：

export default class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
        showModal: false  // set a value in state to store whether or
                          // not to show the Modal
    };

    // I've just put these binding in the constructor 
    // so as not to clock up the render method and they only
    // get called once during the lifetime of the component
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(event) {  // switch the value of the showModal state
    this.setState({
      showModal: !this.state.showModal
    });
  }
  getComponent() {
    if (this.state.showModal) {  // show the modal if state showModal is true
      return <MyModal/>;
    } else {
      return null;
    }
  }
  render() {
    return (
      <App centered={false}>
        <Button onClick={this.handleClick} label="Action"/>
        {this.getComponent}  // call the method to render the modal here.
      </App>
    );
  }
};

/

导出默认类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showmodel:false//在状态中设置一个值以存储
//不显示模态
};
//我刚刚把这些绑定放到构造函数中
//这样就不必为渲染方法计时，而只需
//在组件的生命周期内调用一次
this.handleClick=this.handleClick.bind（this）；
}
handleClick（事件）{//切换showModal状态的值
这是我的国家({
showmodel:！this.state.showmodel
});
}
getComponent（）{
if（this.state.showmodel）{//如果state showmodel为true，则显示模态
返回；
}否则{
返回null；
}
}
render（）{
返回(

{this.getComponent}//在此处调用方法来呈现模式。
);
}
};

/是，这应该可以。您能否避免绑定

getComponent

，因为它的执行总是绑定到类闭包？函数在被调用且未定义时会被绑定。但是，在这种情况下，它的绑定是不必要的，因为它的作用域不会在内联回调或创建自己的

this

上下文的方法中丢失。我修改了我的答案，把你的建议也包括进去，否则会分散我的注意力。谢谢你的捕获：）谢谢你：+1：这就是我的全部观点“否则会分散注意力”。我看到许多新的React.js开发人员不必要地绑定了他们所有的类方法。我们不想传达错误的想法。