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

Question

我有两个组成部分:

家长

child

父组件是类组件，子组件是功能组件。从父组件调用子方法的最佳实践是什么？
这些组件的目标是能够动态加载 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，以便动态加载它。但是，如果您坚持在父级上运行该方法，请查看此 post关于如何做到这一点。