Question

在我的应用程序中，我有currencyList组件（祖父母）呈现Row组件，在每个Row上都有onClick事件侦听器，因此当我单击row时，它将使用数据呈现Popup.So问题是我不知道如何将props从currencyList组件传递到弹出组件，这甚至可能吗？

import React, { Component } from "react";
import Row from "./Row";
class CurrencyList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currencyData: [1, 2, 3, 4, 5, 6],
      chartData: [1, 2, 3, 4, 5, 6]
    };
  }

  render() {
    return (
      <Row data={this.state.currencyData} chartData={this.state.chartData} />
    );
  }
}
export default CurrencyList;

class Row extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  displayPopUp = () => {
    ReactDOM.render(
      <Popup currencyData={data} />,
      document.querySelector(".popup")
    );
  };
  render() {
    return (
      <div
        onClick={() => {
          this.displayPopUp;
        }}
      />
    );
  }
}
export default Row;

class Popup extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return <div className="popup-box" />;
  }
}
export default Popup;

Answer 1

您可以通过道具传递它。像这样：

Sandbox Code

如何将属性从祖父母组件传递到子组件？

1 个答案: