Я использую 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, включая родительский и дочерний компонент. Каким образом это должно произойти.
Я хотел бы знать, есть ли другой способ сделать это.
Я хочу повторно отобразить только мой дочерний компонент при изменении данных в моем родительском компоненте.
Согласовано. Вот как это должно работать. Есть ли другой способ решить проблему? Я хочу, чтобы дочерний компонент повторно отображался при изменении данных родителя. –
@ nishant-arora, оберните ребенка другим компонентом и обработайте его в нем – Yozi
Но я думаю, что это преждевременная оптимизация. Пытаясь заставить замолчать состояние, вы просто путаете заявление о сомнительных преимуществах. Это действительно узкое место в вашей заявке? Простота использования, полезная для отладки. И виртуальный дом помогает экономить производительность даже при использовании нескольких рендеров. – Yozi