0

저는 Meteor with React를 사용하여 샘플 앱을위한 간단한 분류 플랫폼을 구축하고 있습니다. 필터링 된 검색을 수행하는 동안 간단한 문제가 발생했습니다.상위 데이터 변경시 하위 구성 요소 만 렌더링하는 방법은 무엇입니까?

DB에서 가져온 후 검색 결과를 반환하는 구성 요소가 있습니다. 양식을 보유하고 하위 구성 요소 (예 : SearchResults)에 소품을 전달하는 다른 구성 요소 (Search)가 있습니다.

다음은 코드입니다.

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; 
내가 양식을 제출로 돼있로, 검색 결과가 반환됩니다 무슨 일이 일어나고 있는지

하지만, 이름 및 기타 분야는 상위 구성 요소의 상태로 그대로 상태는 전체 구성 요소의 재 변경 부모 및 자식 구성 요소를 포함하는 하위 집합입니다. 그것이 일어날 것으로 예상되는 방식입니다.

다른 방법이 있는지 알고 싶습니다.

상위 구성 요소의 데이터 변경 내용에 내 하위 구성 요소 만 다시 렌더링하려고합니다.

답변

0

부모에게 다시 렌더링을 단락 시키면 자식이 다시 렌더링되지 않습니다. 그것에 대해 자세히 알아보십시오 herehere

+0

동의합니다. 그것이 작동해야하는 방법입니다. 문제를 해결할 다른 방법이 있습니까? 자식 구성 요소가 부모의 데이터 변경시 다시 렌더링하기를 원합니다. –

+0

@ nishant-arora, 자식을 다른 구성 요소로 감싸고 처리하십시오 – Yozi

+0

하지만 조숙 한 최적화라고 생각합니다. 상태를 침묵시키려는 시도를하면 응용 프로그램을 혼란스럽게 만들 수 있습니다. 정말 응용 프로그램의 병목 현상입니까? React의 단순성은 디버깅에 유용합니다. 또한 가상 돔은 여러 렌더링을 사용해도 성능을 절약합니다. – Yozi

관련 문제