JSX template rest syntax

When we have a number of properties that are included in a component, we need to name each property as part of our template, as follows:

return ( 
    <ItemView 
        onItemClicked={_this.itemSelected} 
        DisplayName={item.DisplayName} 
        Id={item.Id} 
    /> 
); 

Here, we are constructing an ItemView component in our render function. The ItemView component needs three properties, named onItemClicked, DisplayName, and Id. When the list of properties for a component becomes large, it becomes very tedious and error prone to have to name each property in our template.

TypeScript now supports using rest syntax in these cases, as follows:

return ( 
    <ItemView 
        onItemClicked={_this.itemSelected} 
        {...item}  
    /> 
); 

Here, we are constructing an ItemView component in our template as normal, and specifying the onItemClicked property. We are then using rest syntax, {...item}, to automatically assign each property for us.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.87.156