javascript - 在 React 组件之间传递 props 或数据

Question

friend 们下午好，我的页面和组件排列在应用程序的主类中，我可以将任何组件或页面的一些结果传递到主类，并从主类获取此属性到任何其他组件吗？为了更好地描述问题，我将展示一个例子:

这是我的主类App.js

import React, {Component} from 'react';
import { BrowserRouter as Router, Route} from "react-router-dom";
import HomePage from "./Pages/HomePage";
import NavBar from "./Components/NavBar";
import PaymentStatus from "./Pages/PaymentStatus";


class App extends Component {

constructor(props) {
    super(props);
    this._isMounted = true;
    this.state = {};
};

    render() {
        return (
            <Router>
                <NavBar/>
                <Route name={'Home'} exact path={'/'} component={HomePage}/>
                <Route name={'PaymentStatus'} exact path={'/payment-status/:tId'} component={PaymentStatus}/>
            </Router>
        );
    }
}

export default App;

现在我的导航栏组件:NavBar.js

import React, {Component} from 'react';

class NavBar extends Component {

constructor(props) {
    super(props);
    this._isMounted = true;
    this.state = {};
};

_makeSomething =async() => {
  // Somw function that returns something
}
render() {
    return (
        <div>
            <div id={"myNavbar"}>
                <div>
                    <a onClick={()=>{this._makeSomething()}} href={'/'}/> Home</a>
                    <a onClick={()=>{this._makeSomething()}} href={"/payment-status"} />Payment Status</a>
            </div>
        </div>
    );
  }
}

export default NavBar;

HomePage.js

import React, {Component} from 'react';

class HomePage extends Component {

constructor(props) {
    super(props);
    this._isMounted = true;
    this.state = {};
};

async componentDidMount() {
 console.log(this.props.match.params.tId)
};

render() {
    return (
        <div>
            <div id={"main"}>
                <div>
                    <p>This is home page</p>
            </div>
        </div>
    );
  }
}

export default HomePage;

PaymentStatusPage.js

import React, {Component} from 'react';

class PaymentStatusPage extends Component {

constructor(props) {
    super(props);
    this._isMounted = true;
    this.state = {};
};

async componentDidMount() {
 console.log(this.props.match.params.tId)
};

render() {
    return (
        <div>
            <div id={"status"}>
                <div>
                    <p>This is payment Status Page</p>
            </div>
        </div>
    );
  }
}

export default PaymentStatusPage;

现在问题来了:当 HomePage.js 或 PaymentStatusPage.js 或 中的某些内容发生更改时，我可以传递给 App.js 事件(或 props)吗NavBar.js另外，希望将收到的 peprops 传递给任何组件。谢谢。

Answer 1

您可以在 App 类中声明方法，然后通过 props 将其传递给另一个组件。例如然后您可以在 MyComponent 中调用此方法并向其传递一些值。这是将值从子组件传递到父组件的方式。在 App 的方法中，您可以简单地使用 setState。剩下要做的就是通过 props 将这个新的状态属性传递给另一个组件。要将值传递给组件，在使用时您必须进行更改

<Route component={SomeComponent}

至

<Route render={() => <SomeComponent somethingChanged={this.somethingChangedMethodInAppClass}}/>

希望对你有帮助!

编辑:您还可以使用 Redux 来外部化状态并在子组件中重用它