Межкомпонентная связь React: как передавать данные между компонентами?

#javascript #reactjs #meteor

Здравствуйте! Вопрос касается связи между компонентами React,а именно: передача данных
из одного компонента в другой.

Пусть есть страница , у которой есть массив объектов items. Для каждого
элемента items создается компонент :

Код Layout.jsx:

class Layout extends Component {
  renderItems() {
    var items = [
      {name: 'Ivan', _id: '1'},
      {name: 'Petya', _id: '2'}
    ];

    return items.map( (each) => {
      return (
        
      );
    });
  }

  render() {
    return (
      
 {this.renderItems} 

    );
  }
}


Код Item.jsx:

class Item extends Component {
  render() {
    return (
      

        {this.props.each.name}
      
    );
  }
}


Пусть теперь я хочу реализовать по щелчку на каждый вывод в консоль его _id.
Сделать это внутри самого  не составляет никакого труда:

Новый код Item.jsx:

class Item extends Component {
  printId() {
    console.log(this.props.each._id);
  }

  render() {
    return (
      

        {this.props.each.name}
      
    );
  }
}


Но как быть, если нужно реализовать кнопку "Показать _id" снаружи, то есть в  ?

Допустим, внутри каждого  добавим checkbox. Если этот чекбокс отмечен галочкой
как selected, то при нажатии кнопки 'Показать _id' в консоль выводятся _id всех отмеченных
Itemов.

Но как передать _id отмеченных Itemов в  ?

Заранее благодарен за ответы.
    

Ответы

Ответ 1

Ответ нашелся сразу в документации, спасибо @AlexeyTen за наводку. Пришлось помучиться,
однако решение готов и оно ниже.

При вызове функции из компонента someFunction.bind(this) мы можем передавать любое
количество аргументов: someFunction.bind(this, arg1, arg2, ...). В этом и заключается
ответ.

Для примера выше: добавим функцию printId в компонент  и навесим на компонент
 вызов printId по  событию onClick. В качестве аргумента в функцию будем передавать
текущий _id элемента. Новый код Layout.jsx:

class Layout extends Component {
  printId(id)
    console.log(id);

  renderItems() {
    var items = [
      {name: 'Ivan', _id: '1'},
      {name: 'Petya', _id: '2'}
    ];

    return items.map( (each) => {
      const eachId = each._id;
      return (
        
      );
    });
  }

  render() {
    return (
      
 {this.renderItems} 

    );
  }
}


Однако, код выше не будет работать. Причина в том, что  это не настоящий
DOM-элемент, соответственно и события OnClick у него быть не может. В строке   onCLick является обычным props. Для того,
чтобы этот код работал, как ожидается, нужно внутри компонента  у настоящего
DOM-элемента прописать передачу настоящему onClick нашу функцию из props:

class Item extends Component {
  render() {
    return (
      

        {this.props.each.name}
      
    );
  }
}


Теперь все работает как надо.