React Native-如何使用组件作为JavaScript对象？

Question

我是React Native的新手，在尝试构建iPhone应用程序时遇到了这个问题。

我的代码是这样的：

var React = require('react-native');
var MyListView = require('./MyListView');  // which renders a <ListView>...</ListView>

var SearchPage = React.createClass({
  onSubmitEditing: function () { /* do something */ },
  render: function() {
    return (
      <ScrollView>
        <TextInput onSubmitEditing={this.onSubmitEditing} />
        <MyListView />
      </ScrollView>
    )
  },
})

我需要在搜索（ onSubmitEditing事件）时更改MyListView （更新数据源 ）的状态 。 我应该怎么做？ 我认为如果可以将<MyListView />用作JavaScript对象，可能会有一些解决方案，但我不知道如何做。

任何帮助将不胜感激！ 提前致谢！

Answer 1

您有2个选择：

1. 假设在SearchPage组件中您知道数据将是什么，则可以将其作为道具传递给MyListView：

2. 但是，我认为更好的选择是将数据存储在商店中（通量），然后在商店中过滤列表。 我做了这样的事情：

   reg = new RegExp(sanitizer.escapeRegExp(query), "i") filteredList = _.filter @initialDataSource(), (item) => item.name.match(reg) this.setState({dataSource: this.state.dataSource.cloneWithRows(filteredList)})

我正在使用lodash筛选列表，然后加载dataSource。 您可以仅将查询传递给MyListView，它更“干净” <MyListView query={queryValue} />

Answer 2

我认为最好的解决方案将作为支持传递给MyListView组件。 您应该在SearchPage组件中维护状态，并在onSubmitEditing函数中设置其状态：

var SearchPage = React.createClass({
getInitialState: function(){
return {toUpdate: false}
}
  onSubmitEditing: function () { this.setState({toUpdate: true})},
  render: function() {
    return (
      <ScrollView>
        <TextInput onSubmitEditing={this.onSubmitEditing} />
        <MyListView toUpdate={this.state.toUpdate}/>
      </ScrollView>
    )
  },
})

每次setState被称为Search组件时，其子组件都将重新呈现。 在MylistView组件内部，您只需要检查this.props.toUpdate并根据此prop值执行操作。