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

Question

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

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

Components 文件夹中有 AppTabNavigator 文件夹，其中包含名为 HomeTab.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 文件夹的 Components 文件夹还包含标题为 CardComponent.js 的文件...我正在尝试将状态从 HomeTab.js 传递到 CardComponent.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;