React FC with forwardedRef

2024/2/27 8:57:04

Im facing issue with ref - I need to ref to function component and pass props to it. So far I got my Parent component and Child Component. In my parent component I need to use ref to my child. I need to work with projectSectionItem inside my parent component.

Parent:

const projectSectionItem = useRef<HTMLDivElement>(null);return i.showOnHP === 1 ?<Project key={index}url={`${URL}${i.button_image.image}`}client={i.client_name}project={i.project.en}btn_color={"#000"}btn_text={i.button_text}href={`/cases/${i.slug}`}ref={projectSectionItem}>{index === 0 ?<ScrollList>{data.map((i, index) => { return <ScrollListItem data-index={index} key={index} ref={projectIndicator} onClick={(e: React.MouseEvent<HTMLLIElement>) => scrollToNextProject(e)} /> })}</ScrollList>: null}</Project>: null;})}

Child:

type APIProps = {url?: string,client?: string,project?: string,btn_text?: string,btn_color?: string,href?: string,
}type HWWProps = {order_client?: number,order_project?: number,className?: stringref?: React.MutableRefObject<HTMLDivElement>
}type ProjectProps = APIProps & HWWProps;export const Project: React.FC<ProjectProps> = props => {return (<StyledProject className={props.className}><ProjectContainer><ProjectImage src={props.url} alt={props.client} /><ProjectTextWrapper><ProjectBrand order_client={props.order_client}>{props.client}</ProjectBrand><ProjectName order_project={props.order_project}>{props.project}</ProjectName><ButtonExtend as={Button} color={props.btn_color}><Link to={props.href}>{props.btn_text}</Link></ButtonExtend></ProjectTextWrapper></ProjectContainer>{props.children}</StyledProject>)
}
Answer

You cannot add refs to functional component without using React.forwardRef to either pass it on to a HTMLDIVElement or using useImperativeHandle hook to expose some functions

Since you wish to add the ref a DOM element in Project component you can pass the ref on to the StyledProject component which is a styled component by using innerRef prop

export const Project: React.FC<ProjectProps> = React.forwardRef((props ,ref: : Ref<HTMLDivElement>)=> {return (<StyledProject className={props.className} innerRef={ref}><ProjectContainer><ProjectImage src={props.url} alt={props.client} /><ProjectTextWrapper><ProjectBrand order_client={props.order_client}>{props.client}</ProjectBrand><ProjectName order_project={props.order_project}>{props.project}</ProjectName><ButtonExtend as={Button} color={props.btn_color}><Link to={props.href}>{props.btn_text}</Link></ButtonExtend></ProjectTextWrapper></ProjectContainer>{props.children}</StyledProject>)
});

After doing this, you can access the ref in parent like projectSectionItem.current

http://en.ppmy.cn/q/41470.html

Related Q&A

How to find out if ipad is in landscape/portrait mode in javascript/jquery?

I want to add an extra div if the ipad is in landscape mode. Is there some sort of if statement that could find this out?Thanks

Handling the Enter / Return key in Chrome

I have an AJAX-y type page. When the user clicks "GO" I need to execute a specific javascript function. I also want to simulate the "GO" click when a user hits "Enter" or …

extend session of Liferay when performing AJAX call

I created a portlet that uses AJAX every function. That is, the portlet is only rendered once and i didnt utilize processAction or the like.Is there a way to extend the users session using built in Lif…

How to print text from textarea?

I want to print text from text area.I have a textarea which text can be updated by user. When user update text from textarea and then print the updated text can be print on page. And this text can be p…

Trying to sort a custom JavaScript object

Im not too good at JS, but have survived thus far. Im creating a sort-of complex JS object and wanting to sort it. The objects structure looks like this:cart.attributes = [{Attribute,Value}... ];Im c…

How can I embed messages using a Discord bot?

I want to code a bot that will embed a users sent message in a specific channel. If you know anything about GTA RP servers, its like a Twitter or Instagram bot. Heres an example:I think its something a…

D3 - Large GeoJSON File does not show draw map properly using projections

I am having an issue with drawing this GeoJSON file I picked up from data.seattle.gov. Specifically, Im using the Shape file which can be found here. I converted it to a GeoJSON file where I provided a…

Datepicker inside bootstrap popover [closed]

Closed. This question needs debugging details. It is not currently accepting answers.Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to repro…

View full website, not mobile version on iPhone

I have a script that detects whether youre an iPhone user or not and redirects to a more iPhone friendly page. <script type="text/javascript">if((navigator.userAgent.match(/iPhone/i)) …

Use duplicate class name on an element?

I found that there are many frameworks that will check the duplicate class name before adding the new class name on the element which I think will slow down the performance. Are there any problems when…