如何只渲染父数据上的子组件?

时间:2016-07-21 09:11:49

标签: javascript meteor reactjs reactive-programming meteor-react

我使用Meteor和React为我的示例应用程序构建一个简单的分类平台。在处理过滤后的搜索时,我遇到了一个简单的问题。

我有一个组件,可以在从DB中获取后返回搜索结果。 还有另一个组件(搜索)保存表单并将道具传递给子组件(即SearchResults)。

这是代码。

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;

发生的是,当我提交表单时,搜索结果按照它应该返回,但是当状态改变时,名称和其他字段作为父组件的状态完整的组件重新渲染,包括父组件和子组件。这是应该发生的方式。

我想知道是否还有其他方法可以做到。

我想在父组件的数据更改中重新渲染我的子组件。

1 个答案:

答案 0 :(得分:0)

这是不可能的,如果你让父母的重新抚养短路,它也会阻止孩子重新出现。详细了解herehere