QuikieApps

已定义的React密钥:用法,组件和替代方案

反应键简介:

密钥是指在React中创建元素列表时需要包含的特殊字符串属性。 

 

为什么在React中使用键? 

这些键在React中使用,以识别列表中的哪些项目被更改,更新或删除。 

简而言之,键用于为列表中的元素赋予标识。 

强烈建议将可唯一标识列表中项目的字符串键与react一起使用。下面给出了一些字符串键示例:

 

常数= [1,2,3,4,5]; 

  

const UpdatedNums =数字.map((数字] =>{ 

返回 <li>{ number } </li>; 

}); 

 您还可以将数组索引分配为列表项的键。下面给出的示例是将数组索引分配为元素的键的示例。 

 

常数= [1,2,3,4,5]; 

  

const UpdatedNums =数字.map((数字,索引)=>{ 

返回 <li>{ number } </li>; 

}); 

 

重要的是要注意,强烈建议不要分配键,因为如果将来数组的元素重新排序,开发人员会感到困惑,因为元素的键也会更改。 

 

在组件中使用React键 

假设您已经为列表项创建了单独的组件,并正在从该组件中提取列表项。在这种情况下,您必须将键分配给从迭代器返回的组件,而不是列表项。 

这意味着,您应该分配反应键。至<Component/> and not to <li>。为了避免出现错误,一个好的做法是记住要为从map()函数内部返回的任何内容分配一个键。 

 

这是一个例子 不正确的用法 键。

 

从“反应”导入React; 

从“ react-dom”导入ReactDOM;

  

//要提取的组件 

功能 MenuItems(道具)

    const item = props.item; 

  

        return(

            <li>

                {item}

            </li>    

        );

   

//会传回 

//无序列表 

功能 Navmenu(道具)

        const list = props.menuitems; 

  

    const UpdatedList = list.map((listItems)=>{ 

            return

                  

        );

    }); 

   

    return( 

        <ul>{updatedList}</ul>);

   

const menuItems = [1,2,3,4,5]; 

   

反应DOM.render( 

    ,  

    document.getElementById('root')

);  

 

输出: 

从上面的图像输出中可以看出,列表已成功呈现,但是向控制台发出了警告,告知迭代器内部的元素未分配键。这是因为我们没有将键分配给要返回到map()迭代器的元素。 

 

下面给出的是正确使用密钥的示例: 

从“反应”导入React; 

从“ react-dom”导入ReactDOM;

  

//要提取的组件 

功能 MenuItems(道具)

    const item = props.item; 

  

        return(

            <li>

                {item}

            </li>    

        );

   

//会传回 

//无序列表 

功能 Navmenu(道具)

        const list = props.menuitems; 

  

    const UpdatedList = list.map((listItems)=>{ 

            return

                  

        );

    }); 

   

    return( 

        <ul>{updatedList}</ul>);

   

const menuItems = [1,2,3,4,5]; 

   

反应DOM.render( 

    ,  

    document.getElementById('root')

);  

 

上面的代码将成功且有效地运行,而不会发出任何警告消息。 

 

反应的键的唯一性: 

在讨论键时,我们多次讨论了分配给数组元素的键必须唯一。这样,我们并不是说键应该是全局唯一的。特定数组中的所有元素都应具有唯一键。也就是说,两个不同的数组可以具有相同的键集。 

 

在下面给出的代码中,我们创建了两个不同的数组,即menuitems1和menuitems2。从这些代码可以看出,两个数组的前5个项的键是相同的,该代码仍然可以成功运行,而不会发出任何警告。 

 

从“反应”导入React; 

从“ react-dom”导入ReactDOM;

  

//要提取的组件 

功能 MenuItems(道具)

    const item = props.item; 

  

        return(

            <li>

                {item}

            </li>    

        );

   

//会传回 

//无序列表 

功能 Navmenu(道具)

        const list = props.menuitems; 

  

    const UpdatedList = list.map((listItems)=>{ 

            return

                  

        );

    }); 

   

    return( 

        <ul>{updatedList}</ul>);

   

const menuItems1 = [1、2、3、4、5]; 

const menuItems2 = [1,2,3,4,5,6]; 

   

反应DOM.render( 

    <div>

          

          

    </div>, 

    document.getElementById('root')

);  

 

注意:按键和道具不相似。仅向组件分配键的过程和方法与道具相同。密钥在React内部,不能像props这样从组件内部访问。因此,对于传递给组件的任何其他道具,我们可以使用分配给Key的相同值。 

 

 使用React键提取组件的另一种选择: 

 键仅在周围数组的上下文中才有意义。 

 例如,如果提取ListItem组件,则应将键保留在<ListItem/>数组中的元素,而不是<li>ListItem本身中的元素。 

 

函数ListItem(props){

  const value = props.value;

  return (

    //错误!无需在此处指定密钥:

    <li键= {value.toString()}>

      {value}

    </li>

  );

}

 

函数NumberList(props){

  const数字= props.numbers;

  const listItems =数字.map((数字)=>

    //错误!密钥应在此处指定:

    <ListItem值= {数字} />

  );

  return (

    <ul>

      {listItems}

    </ul>

  );

}

 

const数字= [1、2、3、4、5];

反应DOM.render(

  <NumberList数字= {数字} />,

  document.getElementById('root')

);

  

正确使用按键的示例

 

函数ListItem(props){

  //正确!无需在此处指定密钥:

  return <li>{props.value}</li>;

}

 

函数NumberList(props){

  const数字= props.numbers;

  const listItems =数字.map((数字)=>

    //正确!键应在数组内指定。

    <ListItem键= {number.toString()}值= {number} / >

  );

  return (

    <ul>

      {listItems}

    </ul>

  );

}

 

const数字= [1、2、3、4、5];

反应DOM.render(

  <NumberList数字= {数字} />,

  document.getElementById('root')

);

 

 

一个好的经验法则是map()调用内的元素需要键。 

 

密钥只能在兄弟姐妹中唯一- 

 数组中使用的键在同级之间应该唯一。但是,它们不必在全球范围内都是唯一的。当我们产生两个不同的数组时,我们可以使用相同的键: 

 

 

功能Blog(props){

  const sidebar = (

    <ul>

      {props.posts.map((post)=>

        <li 键= {post.id}>

          {post.title}

        </li>

      )}

    </ul>

  );

  const content = props.posts.map((post)=>

    <div 键= {post.id}>

      <h3>{post.title}</h3>

      <p>{post.content}</p>

    </div>

  );

  return (

    <div>

      {sidebar}

      <hr />

      {content}

    </div>

  );

}

 

const posts = [

  {id:1,标题:“ Hello World”,内容:“欢迎学习React!”},

  {id:2,标题:“安装”,内容:“您可以从npm安装React。”}

];

反应DOM.render(

  <Blog posts={posts} />,

  document.getElementById('root')

);

 键是React中的提示,但不会传递给您的组件。如果在组件中需要相同的值,则将其作为道具以不同的名称显式传递: 

 

const content = posts.map((post)=>

  <Post

    key={post.id}

    id={post.id}

    title={post.title} />

);

 在上面的示例中,Post组件可以读取props.id,但不能读取props.key。

 

 

Exit mobile version