React Native - 如何将组件用作 JavaScript 对象？答案

【问题标题】：React Native - How to use a component as a JavaScript object?React Native - 如何将组件用作 JavaScript 对象？
【发布时间】：2015-10-25 03:04:10
【问题描述】：

我是 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>
    )
  },
})

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

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

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

你有两个选择：

假设在 SearchPage 组件中您知道数据将是什么，您可以将其作为道具传递给 MyListView：`
但是，我认为更好的选择是将数据存储在存储中（通量），然后过滤存储中的列表。我做了这样的事情：

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

我正在使用 lodash 过滤列表，然后加载数据源。您可以只将查询传递给更“干净”的 MyListView <MyListView query={queryValue} />

【讨论】：

哦，谢谢~我已经采取了道具的方式。我会更深入地挖掘并尝试通量的东西。 :)

【解决方案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 时，搜索组件都会重新渲染其子组件。在 MylistView 组件中，您只需检查 this.props.toUpdate 并根据此 prop 值执行操作。

【讨论】：