как обновить состояние родителя от дочернего компонента вместе с передачей некоторой информации от дочернего компонента

Question

Я пытаюсь построить портал, где у меня есть 3 компонента.

Родительский компонент

-> Дочерний элемент 1

-> Дочерний элемент 2

Из основного компонента

-if (файлы не выбраны)) тогда в графическом интерфейсе должны отображаться только дочерний элемент 1 и число и пути к файлам, связанным с приложением

- иначе, если (пользователь щелкнул по любому файлу), тогда в графическом интерфейсе должны отображаться имя файла и связанные с ним узлы.

Я пытаюсь достичь этого, но я запутался в том, как передавать информацию от родителя к ребенку и наоборот.

В коде, приведенном ниже в Child 1.js, когда пользователь нажимает на путь, родительский компонент должен обновить представление GUI, вызывая Child2, а не вызывая Child1.

Как я могу этого добиться?

Answer 1

Опираясь на то, что предоставлено galishmann , просто передайте y.Filename функции в реквизитах, поскольку она уже ожидает значение в качестве параметра.

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>
    }
}

Answer 2

Для обновления состояния родительского компонента из дочернего компонента с аргументами.Вам необходимо создать метод в родительском компоненте, который устанавливает состояние из аргументов этого метода.И передать этот метод дочернему компоненту с помощью реквизита.

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>
        )
    }
}