Firebase 如何在子组件中调用父组件值

您好，我正在创建react本机应用程序。在此应用程序中，主页包含项目列表和筛选按钮。当我点击过滤器按钮时，过滤器屏幕将打开，该屏幕包含3个过滤器下拉列表。用户将从下拉列表中选择值并单击过滤器按钮。一旦用户点击过滤器按钮，页面应重定向至主页，列表应使用新的过滤器数据重新生成。现在我想把筛选值传递给主页的子组件，但我不知道如何将数据发送给主页的子组件。我可以在控制台窗口中获取所有的过滤器值，但我不知道如何传递该值以呈现组件上的新数据

这是我的密码：

HomeScreen.js

      render() {
    return (
      <View style={styles.container}>
        <HomeProject />
        <View>
          <TouchableHighlight
            style={styles.addButton}
            underlayColor='#ff7043' onPress={() => NavigationService.navigate('Filters', { filterCallback: filterValue => this.onFilterCallback(filterValue) })}>
            <Text style={{ fontSize: 20, color: 'white' }}>+</Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }
   onFilterCallback(filterValue) {
        console.log('-> Callback value:', filterValue);
        this.setState({ filterValue: filterValue });
      }

render（）{
返回(
NavigationService.navigate（'Filters'，{filterCallback:filterValue=>this.onFilterCallback（filterValue）}}>
+
);
}
onFilterCallback（filterValue）{
log（'->回调值：'，filterValue）；
this.setState（{filterValue:filterValue}）；
}

HomeProject.js

class HomeProject extends Component {
  constructor(props) {
    super(props)
  }

  componentWillMount() {
   this.props.fetchProjectList();
    this.createDataSource(this.props);
  }

  componentWillReceiveProps(nextProps) {
    console.log('nextProps' + JSON.stringify(nextProps));
    console.log('receive' + JSON.stringify(nextProps.filterValue));
     this.createDataSource(nextProps);
  }

  createDataSource({ projectlist }) {
    console.log('111');
    console.log('projetclist' + projectlist);
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.dataSource = ds.cloneWithRows(projectlist);
  }

  renderRow(data) {
    console.log('222');
    const { currentUser } = firebase.auth();
  //  if (data.userid !== currentUser.uid && !data.isDraft) {
        return (<ProjectList data={data} />);
  //  }

  }

  render() {
    return (
      <View style={{ flex: 1 }}>
          <ListView
            style={{ flex: 1 }}
            dataSource={this.dataSource}
            renderRow={this.renderRow}
          />
      </View>
    );
  }
}

类HomeProject扩展组件{
建造师（道具）{
超级（道具）
}
组件willmount（）{
this.props.fetchProjectList（）；
this.createDataSource（this.props）；
}
组件将接收道具（下一步）{
log（'nextrops'+JSON.stringify（nextrops））；
log（'receive'+JSON.stringify（nextrops.filterValue））；
this.createDataSource（nextProps）；
}
createDataSource（{projectlist}）{
控制台日志（'111'）；
console.log（'projetclist'+项目列表）；
const ds=new ListView.DataSource({
行已更改：（r1，r2）=>r1！==r2
});
this.dataSource=ds.cloneWithRows（projectlist）；
}
renderRow（数据）{
console.log（'222'）；
const{currentUser}=firebase.auth（）；
//if（data.userid！==currentUser.uid&&！data.isDraft）{
返回（）；
//  }
}
render（）{
返回(
);
}
}

FilterScreen.js

 onGoBack() {
    console.log('Filter is in going back');
    const { userprofile } = this.props;
    const { type } = userprofile;
      console.log('type :' + type);

        const ref = firebase.database().ref('projects');
        const query = ref.orderByChild('type').equalTo(type);
        query.on('value', (snapshot) => {
          console.log('project detail ', snapshot.val());

          const filterProjects = [];

          snapshot.forEach((item) => {
            filterProjects.push({ key: item.key, 
              userid: item.val().userid,
              title: item.val().title,
              location: item.val().location
            });
          });
          console.log("filterProjects: ", filterProjects);


        if (this.params && this.params.filterCallback) this.params.filterCallback(filterProjects);
        console.log('goback');
        this.props.navigation.goBack();

  }


    renderButton() {
    return (
      <Button
        style={{ alignItems: 'center' }}
        onPress={this.onGoBack.bind(this)}
      >
        Filter
      </Button>
    );
  }
 render() {
const { navigate } = this.props.navigation

  return (
      <ScrollView style={{ flex: 1, backgroundColor: '#ffffff' }}>
          {this.renderLoading()}

            <DropDown
                label="Project Type"
                containerStyle={{
                  width: 100,
                  //zIndex: 60,
                  top: 20,

                  }}
                onValueChange={(value) => this.props.userProfile({ prop: 'type', value })}
                selectedValue={this.props.userprofile.type}
              >
                {Object.keys(this.props.types).map((key) => {

                    return (<Picker.Item
                      label={this.props.types[key]}
                      value={this.props.types[key]}
                      key={key}
                    />);
                })}
            </DropDown>

            <DropDown
              label="Language"
              containerStyle={{
                width: 140,
                //zIndex: 60,
                top: 20,

                }}
              onValueChange={(value) => this.props.userProfile({ prop: 'category', value })}
              selectedValue={this.props.userprofile.category}
            >
              {Object.keys(this.props.categories).map((key) => {

                  return (<Picker.Item
                    label={this.props.categories[key]}
                    value={this.props.categories[key]}
                    key={key}
                  />);
              })}
            </DropDown>

            <DropDown
              label="Keywords"
              containerStyle={{
                width: 140,
                //zIndex: 60,
                top: 20,

                }}
              onValueChange={(value) => this.props.userProfile({ prop: 'category', value })}
              selectedValue={this.props.userprofile.category}
            >
              {Object.keys(this.props.categories).map((key) => {

                  return (<Picker.Item
                    label={this.props.categories[key]}
                    value={this.props.categories[key]}
                    key={key}
                  />);
              })}
            </DropDown>

            <CardSection style={styles.filterBtnStyle}>
            {this.renderButton()}
            </CardSection>
      </ScrollView>
    );
  }

onGoBack（）{
log（'过滤器正在返回'）；
const{userprofile}=this.props；
const{type}=userprofile；
console.log（'type:'+type）；
const ref=firebase.database（）.ref（'projects'）；
const query=ref.orderByChild（'type'）.equalTo（type）；
query.on（'值'，（快照）=>{
log（'project detail'，snapshot.val（））；
常量过滤器项目=[]；
snapshot.forEach（（项目）=>{
filterProjects.push（{key:item.key，
userid:item.val（）.userid，
标题：item.val（）.title，
位置：item.val（）.location
});
});
日志（“filterProjects:”，filterProjects）；
if（this.params&&this.params.filterCallback）this.params.filterCallback（filterProjects）；
console.log（'goback'）；
this.props.navigation.goBack（）；
}
renderButton（）{
返回(
滤器
);
}
render（）{
const{navigate}=this.props.navigation
返回(
{this.renderLoading（）}
this.props.userProfile（{prop:'type'，value}）
selectedValue={this.props.userprofile.type}
>
{Object.keys（this.props.types）.map（（key）=>{
返回（）；
})}
this.props.userProfile（{prop:'category'，value}）
selectedValue={this.props.userprofile.category}
>
{Object.keys（this.props.categories）.map（（key）=>{
返回（）；
})}
this.props.userProfile（{prop:'category'，value}）
selectedValue={this.props.userprofile.category}
>
{Object.keys（this.props.categories）.map（（key）=>{
返回（）；
})}
{this.renderButton（）}
);
}

为什么不使用道具为子组件提供filterValue

在HomeScreen.js中：

<HomeProject filterValue={this.state.filterValue}/>

您可以传递任何您想要的道具，并在子组件中使用它们。当在父组件中调用setState时，它将强制使用新值重新命名子组件

您可以在Facebook文档中阅读更多关于道具的信息：

---

你能展示一下你到底试了什么吗？可能是你弄错了或者没有正确使用道具。

this.props.filterValue