如何使兩個組件在React-Redux上相互連接

Question

我在rails項目中使用react / redux。 所以我希望我的列表組件是假裝的（服務器端渲染），而其他組件只是將鼠標懸停在列表項上時顯示詳細信息。

鼠標懸停事件

我的問題是，當鼠標懸停在每個清單項目上時，如何獲取詳細信息組件上的清單數據

簡單的例子

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