Question

所以我的应用程序正在增长，我开始怀疑，从我的情况来看，从映射的组件打开对话框的最佳方法是什么。

因此，目前，我有对象的事件数组，可以映射并创建新组件。

EventFeed.js

events.map(event => <EventCard key={event._id} event={event}/>)

我想从“更多信息”按钮上的每个事件卡上单击呼叫对话框并将事件ID传递给该对话框的操作，我当前的方法如下：

SingleEventCard

class RecipeReviewCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      expanded: false,
      isgoing: this.props.isgoing,
      showModal1: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {  // switch the value of the showModal state
    this.setState({
      showModal1: !this.state.showModal1

    });
  }
  getComponent = () => {
    if (this.state.showModal1) {  // show the modal if state showModal is true
      return <EventView eventid={this.props.event._id} />;
    } else {
      return null;
    }
  }

render() {
return {

<Button onClick={this.handleClick}>More info</Button>
{this.getComponent()}
}
}

在渲染中，我有另一个我不会写的视图（因为没有理由输入和显示一堆），问题是当我打开对话框时，它弄乱了我的事件卡样式。另外，我下次需要单击两次才能打开。有人可以提供更通用的方法，在其中我可以在其他组件中渲染该对话框，也可以在其他组件中进行渲染吗？

从映射的组件打开对话框进行反应

0 个答案: