我在查找有关将我的状态传递到另一个文档的组件的文档/视频时遇到问题

Question

i've got my searchbar on the container, setting 'search' state ontextchange.. and i want to pass that state to the nested component(in a separate document) so it can filter the images displayed based on the search state.

i've tried to pass search everywhere and import/export search. i've also googled this endlessly, and cannot find anything pertaining to the issue. maybe i don't have the terminology right.

Components folder has the AppTabNavigator folder which contains this file titled HomeTab.js I am trying to pass state from HomeTab.js to CardComponent.js pasted below.

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'
  }
});

The Components folder that contains the AppTabNavigator folder, also contains this file titled CardComponent.js ... I am trying to pass state to CardComponent.js from HomeTab.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;

Expected to be able to search my images by ID so I could then learn how to tag them within the app and search those tags. Actual results hae been frustration and lost time.

Answer 1

Updated code of 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;