Как сделать два компонента подключаться друг к другу по React-Redux

Я использую реакцию / редукцию с проектом рельсов. Поэтому я хочу, чтобы мой компонент листинга был претендентом (рендеринг сервера sider), а другой компонент просто отображал детали при наведении указателя мыши на элемент списка.

Событие мыши

Мой вопрос: как я могу получить данные о компоненте детализации при наведении указателя мыши на каждый элемент списка?

Простой пример

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

javascript,ruby-on-rails,reactjs,redux,react-redux,

0

Ответов: 1

1

У вас есть какой - то псевдо - код, но вы будете иметь 3 компонентов: Listings, ListingsItem, и ListingsItemDetail. У вас будет onMouseOverатрибут React для элемента, ListingsItemкоторый будет вызывать обработчик событий для установки состояния. Предполагая, что ваш ListingsItemDetailкомпонент находится внутри ListingsItem, вы проверите состояние, чтобы посмотреть, следует ли показывать ListingsItemDetail. Если ListingsItemDetailэто где-то в другом месте, то вы либо вызовите обработчик событий, переданный в качестве оповещения, либо используете Redux, либо что-то, чтобы установить идентификатор для ListingsItemDetailотображаемого.

Изменить - добавлен частичный пример:

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>
        )
    }
})
JavaScript, рубин-на-рельсы, reactjs, перевождь, реагируют-перевождь,
Похожие вопросы
Яндекс.Метрика