反应网格元素，点击后显示指定元素的详细信息答案

【问题标题】：React grid elements, show details about specified element after clicking it反应网格元素，点击后显示指定元素的详细信息
【发布时间】：2017-12-08 19:47:48
【问题描述】：

我已经创建了一组元素（类似于画廊）AllElements 我正在映射的组件SingleElement 组件

renderAllElements = () => (
            this.state.myData.map(se => (
                <SingleElement key={se.id} name={se.name} tagline={se.tagline} image_url={se.image_url}/>
        )
    )
)

我的 SingleElement 会呈现这个，如下所示

render() {
    return (
        <div className="singleElement">
            <img src={this.props.image_url} alt={this.props.name} />
            <h4>{this.props.name}</h4>
            <h5>{this.props.tagline}</h5>
        </div>
    )
}

直截了当，我想要实现什么？ ---> 单击其中一个元素（指定SingleElement）后，详细信息显示在屏幕前（悬停在整个网格上）。让我们将此组件命名为SingleElementDetails。实现它的最佳方法是什么？ SingleElementDetails 组件应该是 SingleElement 组件的兄弟还是它的孩子？

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

您可以使用AllElements 状态和方法来处理何时/显示什么。像这样的：

class AllElements extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myData: {},
      viewingElement: null,
    };
    this.see = this.see.bind(this);
    this.close = this.close.bind(this);
  }

  see(id) {
    this.setState({
      viewingElement: id,
    });
  }

  close() {
    this.setState({
      viewingElement: null,
    });
  }

  render() {
    const { myData, viewingElement } = this.state;
    return (
      <div>
        {myData.map(se => (
          <SingleElement
            key={se.id}
            name={se.name}
            tagline={se.tagline}
            image_url={se.image_url}
            see={this.see}
            close={this.close}
          />
        ))}
        {viewingElement && (
          <SingleElementDetails element={myData[this.state]} />
        )}
      </div>
    );
  }
}

然后你需要在SingleElement 的onClick 事件上触发this.props.see，并使用CSS 将SingleElementDetails 视觉定位到比赛的其余部分。

【讨论】：