如何将数据或Prop从子组件发送或更新为app.jsx

Question

我是React Js的新手。

我需要在单击按钮上更改整个视图

为此，我需要从子组件中更新父部件的状态。

就像我们作为会话变量一样。你们对此有任何想法，请帮助我。

预先感谢。

这是我的代码：

app.jsx

class App extends React.Component {
constructor(props) {
    super(props)
}
render() {
    let RedirectTo = this.state.page;
    let RenderPage;
    switch (RedirectTo) {
        case 'component':
            RenderPage = true && <NextPage />;
            break;
        default:
            RenderPage = true && <Index />;
    }
    return (
            <div>
                {RenderPage}
            </div>
            );
}

child.jsx

class Child extends React.Component {
constructor(props) {
    super(props);
    this.state = {redirect: 'yes'};
    this.state = {page: 'component'};
}
render() {
    if (this.state.redirect === 'yes') {
        return (
                <div>
                    { true && <App /> }
                </div>
                );
    } else {
        return (
                <div>
                    <a onClick={this.Validate} href="javascript:void(0);">
                        Click To Next
                    </a>  
                </div>
                );
    }
}

Answer 1

首先，对父母对孩子的方式而不是孩子对父母的反应组件，任何您想致电的功能，可能会影响孩子的父母，然后您必须将道具传递给孩子并调用通过父母发生，这将影响您的父母和孩子，

您想尝试实现的目标是错误的方式，您必须在应用程序中引入路由器，该路由器可以将一个页面路由到另一页，您需要检查该react-router是否为此，因此基本上将一个组件导航到另一个组件我们可以使用React-Router，React-Router

Answer 2

只需在父母中函数

function () {
// your functionality here
}

然后将父母在父母中称为

<child functionProp = {this.function} />

在您的孩子组件中

this.props.functionProp

Answer 3

在父母中，您可以将 props的函数传递给孩子：

<child someFunction={this.handleFunction} />

和在父母中的handleFunction方法中，您可以做任何您想做的事。

handleFunction(value) {
    //do something
}

在孩子中，您可以将该someFunction称为：

this.props.someFunction(value)

这样，您可以通过孩子与父母交流。