Javascript 在React中调用组件时如何传递状态（值）？

我有一个React应用程序，它可以根据内置在代码中的“dogs”查询完美地显示Flickr API中的图像。这是一个容器，可以实现以下功能：

import React, { Component } from 'react';
import axios from 'axios';
import apiKey from './config.js';
import Navigation from './Navigation.js';
import Photos from './Photos.js';
import SearchBar from './SearchBar.js';

class Container extends Component {

  constructor (){
    super();
    this.state = {
        imgs:[],
        query: '',
        loading: true
    }
  }

  componentDidMount() {
    this.performSearch();

}

  performSearch = (query = 'dogs') => {
    axios.get(`https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&tags=${query}&per_page=24&format=json&nojsoncallback=1`)
    .then(response => {
      this.setState({ 
        imgs: response.data.photos.photo,
        loading: false
      });
    })
    .catch(err => {
      console.log('Error happened during fetching!', err);
    });
  }

    render() {
        return (
            <div className="container">
            <SearchBar onSearch={this.performSearch}/>
             <Navigation />
              {
                (this.state.loading)
                ? <p>Loading....</p>
                : <Photos data={this.state.imgs}/>
              }
            </div>
            );
    }
}
export default Container;

我有一个带有三个不同链接的导航栏，我想为每个链接调用容器组件——在API中为查询传递一个特定的值

例如，如果我的链接是熊、猫和老鼠，我希望相应的链接能够根据查询条件生成正确的api

我只是不确定如何利用容器组件传递查询项。放松点，因为我对反应有点陌生，但我试着

<Container query="bears" /> 

或

---

但我似乎不知道如何传递适当的值。

看起来您希望将查询作为道具传递进来。首先，我将更新构造函数以接收道具，将它们传递给super，并使用它们设置state的query属性的值：

constructor(props) {
    super(props);
    this.state = {
        imgs: [],
        query: this.props.query,
        loading: true
    }
}

接下来，更新performSearch方法以使用状态的查询属性，而不是硬编码的“dogs”值：

现在，您可以像您所想的那样将适当的查询属性传递给容器：

<Container query="bears" />
<Container query="cats" />
<Container query="mice" />

---

你是个天才。这正是我需要做的。非常感谢。

performSearch = (query = this.state.query) => {

<Container query="bears" />
<Container query="cats" />
<Container query="mice" />