0

Я использую Meteor с React для создания простой классифицированной платформы для своего примера приложения. Работая над отфильтрованным поиском, я столкнулся с простой проблемой.Как визуализировать только дочерний компонент при изменении родительских данных?

У меня есть компонент, который возвращает результаты поиска после извлечения из БД. Существует еще один компонент (поиск), который содержит форму и передает реквизиты дочернему компоненту (т. Е. Поисковые запросы).

Вот код.

import React from 'react'; 
import SearchResults from './searchresults.jsx'; 

const Search = React.createClass({ 
    getInitialState(){ 
    return {name: undefined, brand: undefined, model: undefined, type: undefined}; 
    }, 

    handleSubmit(){ 
    var name = this.refs.name.value; 
    var brand = this.refs.brand.value; 
    var model = this.refs.model.value; 
    var type = this.refs.type.value; 
    this.setState({name: name, brand: brand, model: model, type: type}); 
    }, 

    render(){ 
     return(
     <div> 
      <form onSubmit={this.handleSubmit}> 
      <input type="text" ref="name" placeholder="Name"/> 
      <input type="text" ref="brand" placeholder="Brand"/> 
      <input type="text" ref="model" placeholder="Model"/> 
      <input type="text" ref="type" placeholder="Type"/> 
      <button type="submit" action="submit">Submit Form</button> 
      </form> 
      <SearchResults name={this.state.name} model={this.state.model} brand={this.state.brand} type={this.state.type} /> 
     </div> 
    ); 
} 
}); 

export default Search; 

То, что происходит, когда я отправить форму результат поиска возвращается, как это положено, а также имя и другие поля, как состояние исходного компонента при изменении состояния полного компонента ре -renders, включая родительский и дочерний компонент. Каким образом это должно произойти.

Я хотел бы знать, есть ли другой способ сделать это.

Я хочу повторно отобразить только мой дочерний компонент при изменении данных в моем родительском компоненте.

ответ

0

Это невозможно, если вы коротко замыкаете реинжиниринг в родительском объекте, это также предотвратит реиндеринг ребенка. Узнайте больше об этом here и here

+0

Согласовано. Вот как это должно работать. Есть ли другой способ решить проблему? Я хочу, чтобы дочерний компонент повторно отображался при изменении данных родителя. –

+0

@ nishant-arora, оберните ребенка другим компонентом и обработайте его в нем – Yozi

+0

Но я думаю, что это преждевременная оптимизация. Пытаясь заставить замолчать состояние, вы просто путаете заявление о сомнительных преимуществах. Это действительно узкое место в вашей заявке? Простота использования, полезная для отладки. И виртуальный дом помогает экономить производительность даже при использовании нескольких рендеров. – Yozi

Смежные вопросы