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

Question

I'm newbie to React Native and having this problem when I was trying to build an iPhone application.

My code is like:

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

And I need to change the state of MyListView (update data source ), when searching ( onSubmitEditing event). How should I do that? I thought there may be some solutions if I can use <MyListView /> as a JavaScript object, which I don't know how.

Any helps will be appreciate! Thanks in advance!

Answer 1

You have 2 options:

1. Assuming that in the SearchPage component you know what the data is going to be, you can pass it as a props to the MyListView: `

2. However, I think that the better option will be to store the data in a store (flux), and then filter the list in the store. I did something like this:

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

I am using lodash to filter the list and then load the dataSource. You can pass just the query to the MyListView which is much 'cleaner' <MyListView query={queryValue} />

Answer 2

I think the best solution will be passing as the props to the MyListView component. You should maintain the state in SearchPage component and in the onSubmitEditing function set the state of it:

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

Every time setState is called the Search component and its children are re-rendered. Inside the MylistView component you just need to check this.props.toUpdate and perform the operation based upon this prop value.