27-React Lists and Keys

Lists and Keys

React支持以数组的形式来渲染多个组件,它会将你数组中的每个组件以列表的形式渲染开来。

当你使用数组的方式来渲染你的组件时,你需要给每个组件一个Key值,否则会出现一个警告,提示指出应该为列表的每一项提供一个属性key,如下代码所示:

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = number.map(item => <li>{item}</li>);
    
    return (
        <ul>{listItems}</ul>
    );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
    <NumberList numbers={numbers} />,
    document.getElementById('root')
)

分配key后的代码如下:

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map(item => 
        <li key={item.toString()}>
            {item}
        </li>
    );
    return (
         <ul>{listItems}</ul>
    )
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
    <NumberList numbers={numbers} />,
    document.getElementById('root')
)

Keys值帮助React确定哪些组件已经改变了,增加了或者被移除了。

const numbers =[1, 2, 3, 4, 5];
const listItems = numbers.map(item => 
    <li key={item.toString()}>
        {item}
    </li>
);

数组中的每个组件都需要有一个确定的keys值,即一个确定的身份。

keys值最好是用字符串来做唯一标识符。我们通常用数据的ID来做主键。

Keys只用在有数组的上下文才有意义。

示例:key的错误用法

function ListItem(props) {
    const value = props.value;
    return (
        <li key={value.toString()}>
            {value}
        </li>
    );
}

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map(item =>
        // 这是错误的,这里应该设置上key
        <ListItem value={item} />
    );
    return (
        <ul>{listItems}</ul>
    );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
    <NumberList numbers={numbers}> />,
    document.getElementById('root')
)

示例:key的正确用法

function ListItem(props) {
    // 这才是正确的,在这里不需要设置key
    return <li>{props.value}</li>;
}

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map(item => 
        // 这才是正确的,在这里设置key
        <ListItem key={item.toString()} value={item} />
    );
    return (
        <ul>
            {listItems}
        </ul>
    );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
    <NumberList numbers={numbers} />,
    document.getElementById('root')
)

不同数组中可以用相同的key,但兄弟姐妹之间的键必须是唯一的。

Forms

表单组件不同于其他组件,因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。

交互属性

表单组件支持几个受用户交互影响的属性:

  • value:用于 
posted @ 2017-01-04 23:09  shelfy  阅读(191)  评论(0编辑  收藏  举报