Javascript ReactJS-将数据传输到子组件并从组件单击中获取数据

我有一个父组件，它将渲染面包屑。代码如下：

<Breadcrumbs urlPath={this.state.urlPath} />

   <Breadcrumbs aria-label="breadcrumb">
        {urlArr.map((url, index) => 
            <Link key={index} color="inherit" href="/" >
                { url }
            </Link>
        )}
        <Typography color="textPrimary">{selected}</Typography>
   </Breadcrumbs>

面包屑和面包屑呈现如下：

<Breadcrumbs urlPath={this.state.urlPath} />

   <Breadcrumbs aria-label="breadcrumb">
        {urlArr.map((url, index) => 
            <Link key={index} color="inherit" href="/" >
                { url }
            </Link>
        )}
        <Typography color="textPrimary">{selected}</Typography>
   </Breadcrumbs>

{urlArr.map（（url，索引）=>
{url}
)}
{选定的}

我希望breadcrumbs中的click-on-link事件将{url}发送回父组件

---

有办法吗？谢谢大家

是的。您可以将函数作为prop传递给breadcrumb组件，如下所示

Parent.jsx:

onBreadcrumbSelect(url) {
    console.log(url);
}

render() {
    return (
        ... other components ...
        <Breadcrumbs urlPath={this.state.urlPath} onLinkSelect={this.onBreadcrumbSelect.bind(this)} />
    )

onBreadcrumbSelect（url）{
console.log（url）；
}
render（）{
返回(
…其他组件。。。
)

Breadcrumb.jsx

   <Breadcrumbs aria-label="breadcrumb">
        {urlArr.map((url, index) => 
            <Link key={index} color="inherit" href="/" onClick={() => this.props.onLinkSelect(url)} >
                { url }
            </Link>
        )}
        <Typography color="textPrimary">{selected}</Typography>
   </Breadcrumbs>

{urlArr.map（（url，索引）=>
this.props.onLinkSelect（url）}>
{url}
)}
{选定的}

---

这将把绑定函数从父级传递到breadcrumb。但是，当您在breadcrumb中调用此函数时，它将从父组件调用绑定函数

在父组件上，将此函数和

onLinkClick

参数添加到子组件：

void handleLinkClick(string url){
   /* Do your logic */
}
...
<Breadcrumbs urlPath={this.state.urlPath} onLinkClick={handleLinkClick} />

 <Link key={index} color="inherit" href="/" onClick={() => handleLinkClick(url)} >
         { url }
 </Link>

void handleLinkClick（字符串url）{
/*做你的逻辑*/
}
...

然后调整子组件：

void handleLinkClick(string url){
   /* Do your logic */
}
...
<Breadcrumbs urlPath={this.state.urlPath} onLinkClick={handleLinkClick} />

 <Link key={index} color="inherit" href="/" onClick={() => handleLinkClick(url)} >
         { url }
 </Link>

handleLinkClick（url）}>
{url}

---

这就是您正在尝试的吗？

第二个代码在面包屑组件（子组件）中。“urlArr”变量是什么？它是剪切后的urlPath:var urlArr=this.props.urlPath.split（“/”）；