Javascript 使用ReactJs从父元素到子元素获取单击ID

我正在用ReactJs开发一个应用程序，现在我需要将单击的ID从Main.js页面传递到Sofa.js，这将根据您刚才单击的ID显示不同的信息。 我已经将我的ming全部格式化为PHP，我希望ReactJs有一个像$\u GET ahahh这样的全局变量。也许是的，我现在不知道。我一直在找，但没有找到我要找的东西。我将在下面显示代码。
Main.js代码，不包含导入：

export class Main extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            token: {},
            isLoaded: false,
            models: [],
            offset: offset,
            limit: limit
        };
    }

    componentDidMount() {

        /* Some code not relevant to the question, for getting API token */

        fetch('url/couch-model?offset=' + offset + '&limit=' + limit, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'Authorization': 'JWT ' + (JSON.parse(localStorage.getItem('token')).token)
            }
        }).then(res => {
            if (res.ok) {
                return res.json();
            } else {
                throw Error(res.statusText);
            }
        }).then(json => {
            this.setState({
                models: json.results,
                isLoaded: true
            }, () => { });
        })    
    }

    render() {

        const { isLoaded, models } = this.state;

        if (!isLoaded) {

            return (
                <div id="LoadText">
                    Loading...
                </div>
            )

        } else {

            return (
                <div>

                    {models.map(model =>
                        <a href={"/sofa?id=" + model.id} key={model.id}>
                            <div className="Parcelas">
                                <img src={"url" + model.image} className="ParcImage" alt="sofa" />
                                <h1>{model.name}</h1>

                                <p className="Features">{model.brand.name}</p>

                                <button className="Botao">
                                    <p className="MostraDepois">Ver Detalhes</p>
                                    <span>+</span>
                                </button>
                                <img src="../../img/points.svg" className="Decoration" alt="points" />
                            </div>
                        </a>
                    )}

                    <PageButtons offset={offset} />

                </div>
            )
        }
    }
}

此外，还有route.js：

const Routes = (props) => (
    <BrowserRouter>
        <Switch>
            <Route path='/sofa/:id' component={Sofa}/>
            <Route path='/home' component={Home}/>
            <Route path='*' component={NotFound}/>            
        </Switch>
    </BrowserRouter>
);

export default Routes;

const Routes=（道具）=>(
);
导出默认路径；

我看到您没有使用（从示例中可以看到）react路由器

我真的建议你使用它，因为它让这样的情况变得非常简单

比如说

const paramsecample=（）=>(
账户


网飞公司


齐洛群


雅虎


创造方式


);

并且子组件已通过路由注入匹配

const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
);

constchild=（{match}）=>(
ID:{match.params.ID}
);

---

在您的情况下，Sofa是子组件。您可以使用从url收到的id在componentDidMount上调用所需的任何API

在另一个名为route.js的文件中，我尝试使用/：id，但该页面中的CSS刚刚停止working@SofiaRibeiro你在页面中看到完全刷新了吗？检查页面中的视图源代码，看看是否看到css文件。@SofiaRibeiro使用链接组件而不是Main上的a标记。您可能已经将css文件声明为相对类似，因为您使用的是a标记，它实际上会刷新页面，并且css文件会相对地进行搜索。你能理解吗？是的，我能理解！现在CSS工作了，非常感谢！我现在将测试其余的：）@SofiaRibeiro您应该有类似“”的内容。这是绝对的路径。您需要将其调整到任何端口或url。

const ParamsExample = () => (
  <Router>
    <div>
      <h2>Accounts</h2>
      <ul>
        <li>
          <Link to="/netflix">Netflix</Link>
        </li>
        <li>
          <Link to="/zillow-group">Zillow Group</Link>
        </li>
        <li>
          <Link to="/yahoo">Yahoo</Link>
        </li>
        <li>
          <Link to="/modus-create">Modus Create</Link>
        </li>
      </ul>

      <Route path="/:id" component={Child} />
    </div>
  </Router>
);

const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
);