React Native - 是否可以将道具中的组件传递给其他组件?
问题描述:
的想法是要通过的DetailView作为道具到ListView组件为:React Native - 是否可以将道具中的组件传递给其他组件?
//MainPage.js
...
import ItemsList from './ItemList';
import ItemDetail from './ItemDetail';
var items = [];
...
export default class extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<ItemsList
ItemDetail=<ItemDetail/>
items=items
/>
</View>
)
}
并且列表
//ItemsList.js
...
...
export default class extends React.Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(this.props.items)
}
}
render() {
const { ItemDetail } = this.props.ItemDetail
return (
<View style={{flex:1}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData, rowID) => <ItemDetail item={rowData} />}
/>
</View>
)
}
}
的想法是只写一个通用ITEMLIST。
日志显示this.props.ItemDetail的轨迹作为ReactElement但无法呈现正常
的错误是:
错误:违反不变:元素类型无效:预期字符串(建-in组件)或类/函数(用于复合组件),但得到:未定义。检查StaticRenderer
的渲染方法。
答
你以错误的方式传递组件作为道具。您需要按照以下方式进行操作。
export default class extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<ItemsList
ItemDetail={ItemDetail}
items=items
/>
</View>
)
}
为什么不在'ItemsList'中导入ItemDetail? –
这是简单的解决方案。但是我想保持ItemList的通用性,并且对渲染的孩子一无所知。 – Santi