如何以编程方式单击子组件?反应

Question

我有两个组件，父组件和子组件。目前我有以下代码。但不幸的是，它返回了一个错误：

TypeError:无法读取空的属性"click">

由于某些原因，我希望当按钮被点击时，项目组件也会被点击。但下面的这些代码会产生上面的错误。有人知道如何实现它吗？从"React"导入React，｛useRef｝；

const App = (props) => {
const itemRef = useRef(null);

return (
<div>
{dynamicBoolean ? (
<button onClick={() => itemRef.current.click()}>
click item
</button>
) : (
//more codes here
<Item ref={itemRef} />
)}  
</div>
);
};
export default App;

子组件如下所示(出于演示目的，代码非常长(

import React from 'react';
const Item = (props) => {

return (
<div>
//some design here
</div>
);
};
export default Item;

Answer 1

您需要useRef，并且必须将此引用转发到Item组件。

import React, { forwardRef, useRef } from 'react';
const Item = forwardRef((props, ref) => {
return <li {...props}
onClick={() => alert('clicked on Item')}
ref={ref} >MyItem</li>
})
const App = (props) => {
const itemRef = useRef(null);

return (
<div>
<button onClick={() => itemRef.current.click()}>
click item
</button>


<Item ref={itemRef} />
</div>
);
};
export default App;

Answer 2

import React, { createRef } from "react";
const Hello = (props) => {
const itemRef = createRef();
const hello = () => {
itemRef.current.click();
};
return (
<div>
<button onClick={() => hello()}>click item</button>
<Item ref={itemRef} />
</div>
);
};
const Item = React.forwardRef((props, ref) => {
const myClick = () => {
console.log("this is clicked");
};
return (
<button ref={ref} className="FancyButton" onClick={myClick}>
{props.children}
</button>
);
});
export default Hello;