blocks|key|1290731|text|在React中，尝试在父级上运行子方法并不是一个好主意，因为它主要是一个糟糕设计的标志。因为您希望动态运行SVG，所以可以传递带有路径或所需内容的支柱，以便动态加载它。但是，如果您坚定地在父服务器上运行该方法，请检查这个post如何执行它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1290732|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/37949981/call-child-method-from-parent^0|32|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

In React it is not a good idea to try to run a child method on the parent since it is mainly a sign of a bad design. Since you want to run the SVG dynamically, you could pass a prop with the path or what you need in order to load it dynamically. However, if you are adamant in running the method on the parent check out this <a href="https://stackoverflow.com/questions/37949981/call-child-method-from-parent">post</a> on how to do it.

blocks|key|1287065|text|在父组件中定义所有函数，并将其作为道具传递给子组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1287066|尝尝这个|1287067|class+UnitMonitor+extends+PureComponent+{
++constructor()+{
++++super();
++}
++state+=+{
++++img:+null,
++};
++onChangeShcema+=+schemaID+=>+{
++++axios.get("/api/schemata/get-schemata-nodes/"+%2B+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>
++++);
++}
++};|code-block|syntax|javascript|1287068|在子组件中像这样访问|1287069|onChange={props.onChangeShcema}或onClick={props.onChangeShcema}|offset|length|style|CODE|1287070|img={props.image}|1287071|entityMap^0|0|0|0|0|0|V|W|U|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Y|8|@$M|Z|N|10|O|P]|$M|11|N|12|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

Define all your function in parent component and pass that as props to child component.

Try this

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

Access like this in child component

<code>onChange={props.onChangeShcema}</code> or <code>onClick={props.onChangeShcema}</code>

<pre><code>img={props.image}
</code></pre>

blocks|key|1290754|text|使用临时道具。例如，单击“计数”。useEffect钩子方法中的句柄单击计数当props.count被更改时，调用函数)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1290755|在子组件中，使用以下代码段：|1290756|useEffect(()+=>Call+your+function+is+here,+[props.count+]);|code-block|syntax|javascript|1290757|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Use temporary props. For example click count. Handle click count in useEffect hooks methods When props.count is changed, call function ) 

in your child component use this code segment:

<pre><code>useEffect(() =&gt;Call your function is here, [props.count ]);
</code></pre>

blocks|key|383171|text|您可以创建如下所示的功能子组件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|383172|import+React,+{+forwardRef,+useImperativeHandle+}+from+'react';

export+default+forwardRef((props,+ref)+=>+{
++++useImperativeHandle(ref,
++++++++()+=>+({
++++++++++++storeExpandedRecords+()+{
++++++++++++++++console.log('Storing+expanded+records...');
++++++++++++},
++++++++}));
++++return+(
++++++++BryntumGrid
++++);
});|code-block|syntax|javascript|383173|然后在您的父类中，您可以像这样调用子方法：|383174|import+React,+{+useRef+}+from+'react';

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

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

++++return+(
++++++++<Child+ref={childRef}+/>
++++);
};|383175|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can create a functional child component like this:
<pre><code>import React, { forwardRef, useImperativeHandle } from 'react';

export default forwardRef((props, ref) =&gt; {
 useImperativeHandle(ref,
 () =&gt; ({
 storeExpandedRecords () {
 console.log('Storing expanded records...');
 },
 }));
 return (
 &lt;p&gt;BryntumGrid&lt;/p&gt;
 );
});
</code></pre>
And then in your parent, you can call the child method like this:
<pre><code>import React, { useRef } from 'react';

const Parent = () =&gt; {
 const childRef = useRef(null);

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

 return (
 &lt;Child ref={childRef} /&gt;
 );
};
</code></pre>

I have two components:
<ol>
<li>parent</li>
<li>child</li>
</ol>
The parent is class component and child is functional component. What is best practice to call child methods from the parent component?
The goal of these components is to be able to load svg file dynamically.
Parent component:
<pre><code>class UnitMonitor extends PureComponent {
 constructor() {
 super();
 }
 state = {
 img: null,
 };
 onChangeShcema = schemaID =&gt; {
 axios.get(&quot;/api/schemata/get-schemata-nodes/&quot; + schemaID).then(response =&gt; {
 let path = response.data[&quot;0&quot;][&quot;file&quot;];
 // call loadFile function of child component is needed
 });
render() {
 return (
 &lt;Row type=&quot;flex&quot; className=&quot;&quot;&gt;
 &lt;Col span={25}&gt;
 &lt;SvgViewer /&gt;
 &lt;/Col&gt;
 &lt;/Row&gt;
 );
 }
 };
</code></pre>
Child Component:
<pre><code>const SvgViewer = () =&gt; {

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

 return (
 &lt;div className=&quot;unit-schema-container1&quot;&gt;
 &lt;object id=&quot;svgobject&quot; type=&quot;image/svg+xml&quot; data={null}&gt;&lt;/object&gt;
 &lt;/div&gt;
 );
};

export default SvgViewer;
</code></pre>

how to call function of child in functional component from parent in react.js?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有两个组成部分：parentchild父组件是类组件，子组件是函数组件。从父组件调用子方法的最佳实践是什么？这些组件的目标是能够动态加载svg文件。父组件：class UnitMonitor extends PureComponent {  constructor() {    super();  }  state ...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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