Question

我有两个观点。一个是左侧导航，其中包含一个项目列表，另一个是我需要更改的主屏幕，具体取决于您选择的项目。

这是切换功能，我更改了“我正在尝试更新的名称”

onToggleFilter(checked) {
    let d = this.props.data
    this.setProjectName(d.id)
    //console.log("name" + d.id)
    d.onFilter = checked
    if( d.children && d.children.length > 0 ) {
        d.children.forEach( item => {
            item.onFilter = checked
        })
    }
    this.setState({ selected: checked })
    if( this.props.onFilterChanged ) {
        this.props.onFilterChanged(checked)     
    }
}

setProjectName (data){
    console.log ("name" + data)
    let projectName = data

}

调出来命名为Remarkable（这是左侧导航中的一个项目）

不知何故，我需要将该projectName传递给另一个组件。我是新手做出反应，我确信它很简单但是从阅读文档中我有点卡住了。

好的，我想我知道如何做第一部分：

我有一个具有此功能的数据服务文件

getNavInfo (){


        _instance.navData = navArray

        console.log ("instance hit"+ navArray)

    }

这会选择文件

中其他位置设置的项目数组

这是对其他组件的调用

getDataNav ()

    {
        let d = this.dataService.getNavInfo()
        console.log ("d here" + d)
    }

Dataservice是另一个组件。

当我这样做时

this.dataService.getNavInfo().then(this.getDataNav)

getDataNav (data)

    {
            console.log ("d here" + data);
    }

它告诉我这是未定义的 -

this.dataService.getNavInfo().then(this.getDataNav)

Answer 1

您可以将App.js作为LeftNav和MainScreen组件的父级。将父母的状态作为道具传递给儿童。

<App>
  <LeftNav selected={this.state.projectName} handleToggle={ //... when item been clicked, change projectName in state of App }>
  <MainScreen projectName={this.state.projectName}>
</App>

...用你的id或任何你喜欢的东西替换projectName

Answer 2

好的，我的表现就是这样的。请记住，我知道我需要使用像redux这样的东西来更好地跟踪和管理状态，但是现在我只想要一个方法来刷新数据，当有人点击左侧导航中的项目时：

当有人点击某个项目时，这是来自事件调用 -

this.dataService.newProjectSelected(d.id)

这是来自我尝试更新的视图上的构造函数 -

this.dataService.subscribeToProjectUpdate(this.newDataReceived.bind(this))
newDataReceived(projectId) {
    console.log(projectId)
    if( !projectId ) {
        return
    }

这些是对显示数据的数据的函数的调用 -

    this.dataService.defect(projectId).then(this.processDataDefect)
    this.dataService.demand(projectId).then(this.processDataDemand)
    this.dataService.effort(projectId).then(this.processDataEffort)
    this.dataService.chartLegend(projectId).then(this.proccessDataLegend)
    this.dataService.projectname(projectId).then(this.proccessDataProjectName)
}

这些是实际进行api调用的数据服务文件 -

newProjectSelected(projectId) {
        this.projectCallbacks.map(callback => callback(projectId))
    }

    subscribeToProjectUpdate(callback) {
        if( !this.projectCallbacks ) {
            this.projectCallbacks = new Array()
        }

        // Todo make sure we only add it once
        this.projectCallbacks.push(callback)
    }

我知道它有点hacky但它是其中之一＆＃34;我现在需要一些东西＆＃34;我们都遇到的事情类型。

我如何在react js中的视图之间传递数据

2 个答案: