javascript - React Native - 如何将组件用作 JavaScript 对象?

标签 javascript reactjs react-native

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

我需要更改 MyListView状态 (更新数据源),搜索时(onSubmitEditing事件)。我该怎么做呢?我想如果我可以使用 <MyListView /> 可能会有一些解决方案作为一个 JavaScript 对象,我不知道如何。

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

最佳答案

您有 2 个选择:

  1. 假设您知道 SearchPage 组件中的数据是什么,您可以将其作为 props 传递给 MyListView:`
  2. 但是,我认为更好的选择是将数据存储在存储中(flux),然后过滤存储中的列表。我做了这样的事情:

    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} />

关于javascript - React Native - 如何将组件用作 JavaScript 对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33325740/

相关文章:

javascript - 无法读取未定义 [Angular2] 的属性 'isStopped'

javascript - Karma/systemjs 尝试运行测试时不查找 node_modules 目录

javascript - 如何限制 ResizeObserver?

javascript - 与 Google plus 分享并获得成功或失败的回应

javascript - ReactJS:为什么 CSS Flexbox 的 alignItems 不起作用?

reactjs - 类型错误 : undefined is not an object (evaluating '_ref.painLevelColor' )

javascript - Mobx 可观察数组未更新

javascript - 使用 React Async 渲染数组未定义

javascript - View 在 onPress 后不重新渲染

react-native - 找不到变量 __fbbatchedbridge (<未知文件> : 1)