我有两个组成部分:
父组件 子组件
我试图从Parent调用Child的方法，我尝试了这种方式，但不能得到一个结果:
class Parent extends Component {
render() {
return (
<Child>
<button onClick={Child.getAlert()}>Click</button>
</Child>
);
}
}
class Child extends Component {
getAlert() {
alert('clicked');
}
render() {
return (
<h1 ref="hello">Hello</h1>
);
}
}
是否有一种方法从父调用子方法?
注意:子组件和父组件在两个不同的文件中。
当前回答
如果你这样做只是因为你想让Child为它的父对象提供一个可重用的trait，那么你可以考虑使用render-props来代替。
这种技术实际上把结构颠倒过来了。Child现在包装了父对象，所以我将它重命名为AlertTrait。为了保持连续性，我保留了Parent这个名字，尽管它现在已经不是一个真正的Parent了。
// Use it like this:
<AlertTrait renderComponent={Parent}/>
class AlertTrait extends Component {
// You will need to bind this function, if it uses 'this'
doAlert() {
alert('clicked');
}
render() {
return this.props.renderComponent({ doAlert: this.doAlert });
}
}
class Parent extends Component {
render() {
return (
<button onClick={this.props.doAlert}>Click</button>
);
}
}
在这种情况下，AlertTrait提供了一个或多个特征，它将这些特征作为道具传递给renderComponent道具中给定的任何组件。
Parent接收doAlert作为道具，并在需要时调用它。
(为了清晰起见，我在上面的例子中调用道具renderComponent。但在上面链接的React文档中，他们只称之为渲染。)
Trait组件可以在它的渲染函数中渲染父元素周围的东西，但它不渲染父元素内部的任何东西。实际上，如果它将另一个道具(例如renderChild)传递给父对象，父对象就可以在它的渲染方法中使用它，它就可以在父对象内部渲染东西。
这与OP要求的有些不同，但有些人可能会在这里结束(就像我们所做的那样)，因为他们想要创建一个可重用的trait，并且认为子组件是实现这一点的好方法。
其他回答
这个模式类似于@brickingup answer。但是在这个版本中，你可以设置任意多的子动作。
import { useEffect } from "react";
export const Parent = () => {
const childEvents = { click: () => {} };
return (
<div onClick={() => childEvents.click()}>
<Child events={childEvents}></Child>
</div>
);
};
export const Child = (props) => {
const click = () => {
alert("click from child");
};
useEffect(() => {
if (props.events) {
props.events.click = click;
}
}, []);
return <span>Child Component</span>;
};
我尝试使用createRef或useRef。它们都返回null。
其次，这个答案提出通过一个道具来设置一个在我看来最合理的函数。但如果子组件用于多个地方，则应该将额外的道具添加到其他地方。此外，如果您想在孙辈中调用一个方法，这个方法可能太啰嗦或太冗长。
所以我用一种非常原始的方式创建了我自己的函数存储。
下面是functionStore.js文件
const fns = {};
export function setFn(componentName, fnName, fn) {
if (fns[componentName]) {
fns[componentName][fnName] = fn;
} else {
fns[componentName] = { fnName: fn };
}
}
export function callFn(componentName, fnName) {
fns[componentName][fnName]();
}
我只是设置了需要从任何组件调用的函数。
import { setFn } from "./functionStore";
export class AComponent extends React.Component {
componentDidMount() {
setFn("AComponent", "aFunc", this.aFunc);
}
aFunc = () => { console.log("aFunc is called!"); };
}
然后我从其他组件调用它
import { callFn } from "./functionStore";
export class BComponent extends React.Component {
// just call the function
bFunc = () => {
callFn("AComponent", "aFunc");
};
}
一个缺点是要调用的函数应该是无参数的。但这也可能以某种方式解决。目前，我不需要传递参数。
如果你这样做只是因为你想让Child为它的父对象提供一个可重用的trait，那么你可以考虑使用render-props来代替。
这种技术实际上把结构颠倒过来了。Child现在包装了父对象，所以我将它重命名为AlertTrait。为了保持连续性，我保留了Parent这个名字，尽管它现在已经不是一个真正的Parent了。
// Use it like this:
<AlertTrait renderComponent={Parent}/>
class AlertTrait extends Component {
// You will need to bind this function, if it uses 'this'
doAlert() {
alert('clicked');
}
render() {
return this.props.renderComponent({ doAlert: this.doAlert });
}
}
class Parent extends Component {
render() {
return (
<button onClick={this.props.doAlert}>Click</button>
);
}
}
在这种情况下，AlertTrait提供了一个或多个特征，它将这些特征作为道具传递给renderComponent道具中给定的任何组件。
Parent接收doAlert作为道具，并在需要时调用它。
(为了清晰起见，我在上面的例子中调用道具renderComponent。但在上面链接的React文档中，他们只称之为渲染。)
Trait组件可以在它的渲染函数中渲染父元素周围的东西，但它不渲染父元素内部的任何东西。实际上，如果它将另一个道具(例如renderChild)传递给父对象，父对象就可以在它的渲染方法中使用它，它就可以在父对象内部渲染东西。
这与OP要求的有些不同，但有些人可能会在这里结束(就像我们所做的那样)，因为他们想要创建一个可重用的trait，并且认为子组件是实现这一点的好方法。
你可以很容易地使用你的子组件作为react自定义钩子来应用这个逻辑。
如何实施?
子函数返回一个函数。 子函数返回JSON:{函数、HTML或其他值}作为示例。
在这个例子中，应用这个逻辑没有意义，但很容易看出:
const {useState} = React; //Parent const Parent = () => { //custome hook const child = useChild(); return ( <div> {child.display} <button onClick={child.alert}> Parent call child </button> {child.btn} </div> ); }; //Child const useChild = () => { const [clickCount, setClick] = React.useState(0); {/* child button*/} const btn = ( <button onClick={() => { setClick(clickCount + 1); }} > Click me </button> ); return { btn: btn, //function called from parent alert: () => { alert("You clicked " + clickCount + " times"); }, display: <h1>{clickCount}</h1> }; }; const rootElement = document.getElementById("root"); ReactDOM.render(<Parent />, rootElement); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>
父组件
import Child from './Child'
export default function Parent(props) {
const [childRefreshFunction, setChildRefreshFunction] = useState(null);
return (
<div>
<button type="button" onClick={() => {
childRefreshFunction();
}}>Refresh child</button>
<Child setRefreshFunction={(f) => {
setChildRefreshFunction(f);
}} />
</div>
)
}
子组件
export default function Child(props) {
useEffect(() => {
props.setRefreshFunction(() => refreshMe);
}, []);
function refreshMe() {
fetch('http://example.com/data.json')....
};
return (
<div>
child
</div>
)
}
