Question

我创建了4个不同的组件，分别是Home，Market，Add，add transaction。在主页中，我正在显示市场和添加组件。当我单击市场按钮时，我从一个API中获取了很多数据，而当我单击一个数据时，另一个组件正在调用添加交易。在该组件中，我创建了添加按钮，我希望在单击添加IT时将其添加到主页组件中，并显示在主页上。

在这里，我想从“添加组件”中调用“添加事务组件”。您可以在CodeSandBox的给定链接中看到。

访问：https://codesandbox.io/s/stoic-lamarr-2ubzd 观看视频：https://drive.google.com/open?id=1iLpE270nuTCqP-yBwwdmxx8-HjjZbp4u 随心所欲观看视频

Answer 1

对于您要确切实现的目标，我有些困惑，但是如果我猜对了，我认为您正在尝试单击add中的Add component按钮。

有两种方法-

将回调函数从父组件Router.js in your case传递到子组件Add.js component，并使用该回调将数据项传递回父组件，并将其作为props传递给父组件其他组件Home.js in your case。
使用redux帮助传递来自Add.js component to Home.js component的数据。我强烈建议您使用这种方法，因为它可以使您免于回调的麻烦。

下面是第一种方法的示例：

您的Route.js文件将如下所示：

import React, { Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Index from "./index";
import Market from "./Market";
import Home from "./Home";
import Add from "./Add";
import AddTransaction from "./AddTransaction";

export default class Routerr extends Component {
  state = {
    addData: ""
  };
  passData(data) {
    this.setState({
      addData: data
    });
  }

  render() {
    return (
      <div>
        <Router>
    <Route path="/" exact render={(props) => <Home {...props} myData={this.state.addData}/>} />
          <Route path="/Market" exact component={Market} />
          <Route
            path="/Add"
            exact
            component={Add}

          />
          <Route
            path="/Market/AddTransaction"
            exact
            render={(props) => <AddTransaction {...props} callback={this.passData.bind(this)} />}
          />
          <Route path="/Add/AddTransaction" exact component={AddTransaction} />
        </Router>
      </div>
    );
  }
}

我在这里所做的是我添加了一个回调函数passData并将其作为prop function called callback传递给Add.js component。

然后，我正在使用从passData函数接收的数据，并将其设置为状态，并将其传递到myData prop，然后传递给Home.js component。

Add.js component看起来像这样-

import React, { Component } from "react";
export default class Home extends Component {
  state = {
    itemss: [this.props.location.crdata]
  }
  myAction(data){
    console.log("my Action");
    this.props.callback(data);
  }
  render() {
    console.log("Props Data", this.state.itemss);
    return (
      <div>
        {this.state.itemss.map(item => {
          var coinImage =
            "http://www.cryptocompare.com" + item.CoinInfo.ImageUrl;
          return (
            <div>
              <img style={{ width: "25px" }} src={coinImage} />
              <h6>{item.CoinInfo.Name}</h6>
              <h6>{item.RAW.USD.PRICE}</h6>
              <button onClick={() => this.myAction.bind(this,item)}>Add</button>
            </div>
          );
        })}
      </div>
    );
  }
}

因此从上面的代码可以清楚地看到，当用户单击按钮时，数据将通过回调函数向下传输给父级。

下面是您的Home.js，您将在其中使用这些数据：

import React, { Component } from "react";
import "./Home.css";
import Footer from "./Footer";
export default class Home extends Component {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <div className="HomeDesign">
        <div className="row m-0" style={{ border: "1px solid red" }}>
          <div className="col-6">{this.props.myData}</div>
          <div className="col-6">Hello</div>
        </div>
        <Footer />
      </div>
    );
  }
}

希望这会有所帮助。但我希望您借此机会学习Redux并在上面应用它。

请注意：我尚未测试以上代码。因此，请尝试一下。

如何将两个不同组件中的两个专家传递到单个组件中

1 个答案: