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来动态加载它。但是，如果您坚持要在父级上运行该方法，请查看此post上的操作方法。

Answer 2

在父组件中定义所有功能，并将其作为道具传递给子组件。

尝试一下

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"];
       this.setState({img: path});
      // call loadFile function of child component is needed
    });
render() {
    return (
      <Row type="flex" className="">
        <Col span={25}>
          <SvgViewer onChangeShcema ={this.onChangeShcema} image={this.state.img} />
        </Col>
      </Row>
    );
  }
  };

在子组件中这样访问

onChange={props.onChangeShcema}或onClick={props.onChangeShcema}

img={props.image}

Answer 3

使用临时道具。例如，点击计数。处理useEffect挂钩方法中的点击计数当props.count更改时，调用函数）

在您的子组件中使用以下代码段：

useEffect(() =>Call your function is here, [props.count ]);

Answer 4

你可以像这样创建一个功能性的子组件：

import React, { forwardRef, useImperativeHandle } from 'react';

export default forwardRef((props, ref) => {
    useImperativeHandle(ref,
        () => ({
            storeExpandedRecords () {
                console.log('Storing expanded records...');
            },
        }));
    return (
        <p>BryntumGrid</p>
    );
});

然后在你的父级中，你可以像这样调用子级方法：

import React, { useRef } from 'react';

const Parent = () => {
    const childRef = useRef(null);

    useEffect(() => {
        if (childRef?.current) {
            childRef.current.storeExpandedRecords();
        }
    }, []);

    return (
        <Child ref={childRef} />
    );
};

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

4 个答案: