在 React-Native 中使用 ListView,我已经看到不一样了,将props移动到列表项,
仅通过引用将函数作为 props 传递,并调用子组件中的参数,或
将函数作为定义了参数的 props 传递,并在 child 中调用没有参数的函数
没有一个解决方案有效。
调用的函数是 Redux 的 Actions 创建者,并被调度。这是 Redux 还是 React-Native(可能是 ReactJS)的问题
这是一个片段,市场为 //ERROR 不起作用的代码行,然后是好的代码行
class App extends Component {
// On props
// data: an Array
// doThis: an action creator of Redux
// doThat: idem
constructor(){
super();
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
}
render () {
const dataSource = this.ds.cloneWithRows(this.props.data);
return (
<View>
<ListView style={{flex:1}}
dataSource={dataSource}
renderRow={(rowData, sectionID, rowID) =>
<Item rowData={rowData}
//ERROR
//onPress={this.props.doThis}
//onLongPress={this..props.doThat}
//RIGHT NO ERROR TOO
onPress={() => this.props.doThis(rowData)}
onLongPress={() => this.props.doThat(rowData)}
/>
}
/>
</View>
)
}
}
class Item extends Component {
render() {
return (
<View>
<TouchableHighlight
//ERROR
//onPress={() => { this.props.onPress( this.props.rowData ) }}
//onLongPress={() => { this.props.onLongPress( this.props.rowData ) }}
//WRONG TOO
onPress={this.props.onPress}
onLongPress={this.props.onLongPress}
>
<Text>
{rowData}
</Text>
</TouchableHighlight>
</View>
);
}
}
这里有一个关于这个问题的回购https://github.com/srlopez/test 提前致谢