我无法找到有关将我的状态传递给另一个文档组件的文档/视频

Question

我在容器上有我的搜索栏，在文本更改上设置了"搜索"状态......我想将该状态传递给嵌套组件(在单独的文档中)，以便它可以根据搜索状态过滤显示的图像。

我尝试在任何地方传递搜索和导入/导出搜索。 我也无休止地用谷歌搜索了这个，找不到与该问题有关的任何内容。 也许我没有正确的术语。

组件文件夹包含 AppTabNavigator 文件夹，其中包含此标题为"主页选项卡"的文件.js 我正在尝试将状态从HomeTab.js传递到CardComponent.js粘贴在下面。

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Container, Content, Icon } from 'native-base';
import CardComponent from '../CardComponent';
import { SearchBar } from 'react-native-elements';
class HomeTab extends Component {
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-search" style={{ color: tintColor }} />
)
};
state = {
search: ''
};
updateSearch = search => {
this.setState({ search });
console.warn(search);
};
render() {
const { search } = this.state;
return (
<Container style={styles.container}>
<SearchBar
containerStyle={{ backgroundColor: 'transparent' }}
placeholder="Filter for..."
placeholderTextColor="white"
onChangeText={this.updateSearch}
value={search}
/>
<Content>
<CardComponent search={this.state.search} />
</Content>
</Container>
);
}
}
export default HomeTab;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black'
}
});

包含 AppTabNavigator 文件夹的组件文件夹还包含此标题为 CardComponent 的文件.js ...我正在尝试从HomeTab将状态传递给CardComponent.js.js

import React, { Component } from 'react';
import { View, Dimensions, Image, Text, TouchableOpacity } from 'react-native';
var images = [
require('../assets/IMG-0028.jpeg'),
require('../assets/IMG-0048.jpeg'),
require('../assets/IMG-0064.jpeg'),
require('../assets/IMG-0089.jpeg'),
require('../assets/IMG-0119.jpeg'),
require('../assets/IMG-0151.jpeg'),
require('../assets/IMG-0152.jpeg'),
require('../assets/IMG-0153.jpeg'),
require('../assets/IMG-0154.jpeg'),
require('../assets/IMG-0155.jpeg'),
require('../assets/IMG-0184.jpeg'),
require('../assets/IMG-0221.jpeg'),
require('../assets/IMG-0268.jpeg'),
require('../assets/IMG-0309.jpeg'),
require('../assets/IMG-0320.jpeg'),
require('../assets/IMG-0474.jpeg'),
require('../assets/IMG-0707.jpeg'),
require('../assets/IMG-0860.jpeg')
];
var { width, height } = Dimensions.get('window');
class CardComponent extends Component {
renderHome = () => {
console.log(search);
return images.map((image, index) => {
return (
<TouchableOpacity onPress={() => console.warn(index)} key={index}>
<View
key={index}
style={[
{ width: width / 3 },
{ height: height / 3 },
{ marginBottom: 2 },
index % 3 !== 0 ? { paddingLeft: 2 } : { paddingLeft: 0 }
]}
>
<Image
style={{ flex: 1, width: undefined, height: undefined }}
source={image}
/>
</View>
</TouchableOpacity>
);
});
};
render() {
return (
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{this.renderHome()}
</View>
);
}
}
export default CardComponent;

希望能够按ID搜索我的图像，以便我可以学习如何在应用程序中标记它们并搜索这些标记。实际结果是沮丧和浪费时间。

Answer 1

更新了 CardComponent 的代码：

class CardComponent extends Component {
renderHome = () => {
console.log(this.props.search);
return images.map((image, index) => {
return (
<TouchableOpacity onPress={() => console.warn(index)} key={index}>
<View
key={index}
style={[
{ width: width / 3 },
{ height: height / 3 },
{ marginBottom: 2 },
index % 3 !== 0 ? { paddingLeft: 2 } : { paddingLeft: 0 }
]}
>
<Image
style={{ flex: 1, width: undefined, height: undefined }}
source={image}
/>
</View>
</TouchableOpacity>
);
});
};
render() {
return (
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
`{this.renderHome.bind(this)()}`
</View>
);
}
}
export default CardComponent;