如何从react.js中的父级调用功能组件中子级的功能？

Question

我有两个组成部分：

1. 父母
2. 孩子

父组件是类组件，子组件是功能组件。从父组件调用子方法的最佳实践是什么？

这些组件的目标是能够动态加载 svg 文件。

父组件：

class UnitMonitor extends PureComponent {
  constructor() {
    super();
  }
  state = {
    img: null,
  };
  onChangeShcema = schemaID => {
    axios.get("/api/schemata/get-schemata-nodes/" + schemaID).then(response => {
      let path = response.data["0"]["file"];
      // call loadFile function of child component is needed
    });
render() {
    return (
      <Row type="flex" className="">
        <Col span={25}>
          <SvgViewer />
        </Col>
      </Row>
    );
  }
  };

子组件：

const SvgViewer = () => {

  const loadFile = path => { 
    let svgFile = require("./images/" + path);
    const svg = document.querySelector("#svgobject");
    svg.setAttribute("data", svgFile);
  };

  return (
    <div className="unit-schema-container1">
      <object id="svgobject" type="image/svg+xml" data={null}></object>
    </div>
  );
};

export default SvgViewer;

Answer 1

在 React 中，尝试在父方法上运行子方法并不是一个好主意，因为这主要是糟糕设计的标志。由于您想要动态运行 SVG，因此您可以传递包含路径或动态加载所需内容的 prop。但是，如果您坚决要在父级上运行该方法，请查看这篇文章以了解如何执行此操作。