javascript - 如何在 React-Redux 上使两个组件相互连接

Question

我在 Rails 项目中使用了 React/Redux。所以我希望我的列表组件是伪装者(服务器端渲染)，而其他组件仅在鼠标悬停在列表项上时显示详细信息。

Mouse Hover event

我的问题是当鼠标悬停在每个列表项上时如何获取详细信息组件的列表数据

简单示例

My Code on rails view
= react_component('Listing', { data: @listings }, prerender: true )
= react_component('Detail', { }, prerender: false )

My Code on JS
export default class Listings extends Component {
  render() {
    return (
      <Provider store={store}>
        <ListingsWidget />
      </Provider>
    );
  }
}

My Code for Detail

export default class ListingDetail extends Component {
  render() {
    return (
      <Provider store={store}>
        < ListingDetail Widget />
      </Provider>
    );
  }
}

Answer 1

那里有一些伪代码，但您将有 3 个组件:Listings、ListingsItem 和 ListingsItemDetail。您的 ListingsItem 中的元素上将有一个 React onMouseOver 属性，它将调用您的事件处理程序来设置状态。假设您的 ListingsItemDetail 组件位于 ListingsItem 内，您将检查状态以查看是否应显示 ListingsItemDetail。如果 ListingsItemDetail 在其他地方，那么您可以调用作为 prop 传入的事件处理程序，或者使用 Redux 或其他东西来设置应显示的 ListingsItemDetail 的 id 。

编辑 - 添加了部分示例:

const ListItem = React.createClass({
    getInitialState() {
        return {showDescription: false}
    },

    handleMouseOver() {
        this.setState({showDescription: true})
    },

    handleMouseOut() {
        this.setState({showDescription: false})
    },

    renderDescription() {
        if (this.state.showDescription) {
            return (
                <ListItemDescription description={this.props.item.description} />
            )
        }
    },

    render() {
        return (
            <div onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
                List item title: {this.props.item.title}
                {this.renderDescription}
            </div>
        )
    }
})