Question

我正在尝试构建一个包含3个组件的门户。

父项

->孩子1

->儿童2

从主要组件开始

-如果（未选择任何文件）则GUI应该仅显示Child 1和与应用程序关联的文件的计数和路径名

-否则，如果（用户单击了任何文件），那么GUI应该显示文件名，并且与之关联的节点。

我正在努力实现这一目标，但我对如何将信息从父母传递给孩子以及反之亦然感到困惑。

在下面的子1.js中给出的代码中，当用户单击路径时，父组件应通过调用Child2而不是调用Child1来更新GUI视图。

我该如何实现？

Answer 1

用于使用参数从子组件更新父组件状态。您需要在父组件中创建方法，该方法根据此方法的参数设置状态。并通过道具将该方法传递给子组件。

class Parent extends React.Component {
    state = {text: ""}

    updateText = text => {
        this.setState({text: text})
    }

    render () {
        return (<Child updateText={this.updateText}>)
    }
}

class Child extends React.Component {
    render () {
        return (
            <button 
                onClick={
                    () => this.props.updateText("updated state from child component")
                }
            >Update State</button>
        )
    }
}

Answer 2

基于 galishmann 提供的内容，只需将y.Filename传递给props中的函数，因为它已经期望vlaue作为参数。

class Parent extends React.Component {
    state = { text: "" }

    updateText = text => {
        this.setState({ text: text })
    }

    render() {
        return (<Child updateText={this.updateText} />)
    }
}

class Child extends React.Component {
    ....
    ....
    ....

    render() {
        const { updateText } = this.props;
        const pathElement = this.state.groupedByAppName.map((x) => {
            return (
                <Collapsible trigger={x.AppName + '\t' + x.Count + ' files'} transitionTime={20}>
                    {
                        x.section.map((y) => <p filename={y.FileName} onClick={() => updateText(y.Filename)}>{y.Path}</p>)
                    }
                </Collapsible>
            )
        })
        return <div> {pathElement} </div>
    }
}

如何从子组件更新父状态，以及如何从子组件传递一些信息

2 个答案: