React节点属性，列表渲染

Z时代
2024-01-10
分类：综合

react

节点属性渲染

需要注意jsx语法的元素属性

由于jsx语法是和js语法相包容的，所以，jsx里的语法会和js的语法相冲突，比如说，元素的属性值class和js里的关键字class重名，所以，html的元素在jsx的语法里，使用这些属性名的时候就要注意与js的关键字等冲突，这里的class被替换成了className：

<script type="text/babel">
    const element = (
        <div>
            <h2 class="active">Hello word!</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

即便是因为某些原因使其生效了，但是并不符合规范！！！

除此之外，还有很多基本的元素也需要注意：


<script type="text/babel">
    const element = (
        <div>
            <h2 className="active"> Hello word!</h2>
            <input type="button" value="按钮">
            <input type="checkbox" name="ipt" id="ipt" checked/>
        </div>
    );
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

也比如label的for：


<script type="text/babel">
    const element = (
        <div>
            <h2 className="active">Hello word!</h2>
            <label for="ipt">单选按钮</label>
            <input type="checkbox" name="ipt" id="ipt" defaultChecked />
        </div>
    );
    ReactDOM.render(
        element,
        document.querySelector("#app")
    )
</script>

jsx的语法相对html是较严格的，标签必须规范，自闭和标签必须闭合等。

react的语法提示也是非常亲民，不用过于担心。

列表渲染

如果是数组，自动根据key值遍历：

<script type="text/babel">
    const arr = [
        1,
        2,
        3
    ]
    const arr2 = [
        'a',
        'b',
        'c'
    ]
    const arrLi = [
        <li key="1">1</li>,
        <li key="2">2</li>,
        <li key="3">3</li>
    ]
    const element = (
        <div>
            {arrLi}
            {arr}
            {arr2}
        </div>
    );
    ReactDOM.render(element,document.querySelector("#app"))
</script>

当然，这些无效的数组可以通过map方法重新打包成<li>{number}</li>的jsx对象，然后返回给渲染的元素。

如果是对象：


<script type="text/babel">
     const obj = [
         {
             name:'Bob',
             age:'18',
             sex:'女'
         },
         {
             name:'Lucy',
             age:'16',
             sex:'女'
         },
         {
             name:'Atom',
             age:'80',
             sex:'男'
         }
     ]
     const element = []
     obj.forEach((item,index)=>{
         element.push(<li key={index}>name:{item.name} - age:{item.age} - sex:{item.sex}</li>);
         //如果渲染的是数组，一定要在每一个渲染对象里插入key，作为遍历参考！不然会报错
     })
     ReactDOM.render(element,document.querySelector("#app"))
 </script>

为什么渲染列表需要键入key值

Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。

一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的id作为元素的key:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

元素的key只有在它和它的兄弟节点对比时才有意义。

比方说，如果你提取出一个ListItem组件，你应该把key保存在数组中的这个<ListItem />元素上，而不是放在ListItem组件中的<li>元素上。

如果使用组件化思想，你定义了一个list的组件，用于列表的渲染：

function ListItem(props) {
	const value = props.value;
	return (
		// 错啦！你不需要在这里指定key:
		<li key={value.toString()}>
		  {value}
		</li>
	);
}
function NumberList(props) {
	const numbers = props.numbers;
	const listItems = numbers.map((number) =>
	  //错啦！元素的key应该在这里指定：
	  <ListItem value={number} />
	);
	return (
	  <ul>
	    {listItems}
	  </ul>
	);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
	<NumberList numbers={numbers} />,
	document.getElementById('root')
);

正确的使用方式

<script type="text/babel">
    function ListItem(props) {
        // 对啦！这里不需要指定key:
        return <li>{props.value}</li>;
    }
    function NumberList(props) {
        const numbers = props.numbers;
        const listItems = numbers.map((number) =>
            //key应该在数组的上下文中被指定
            <ListItem key={number.toString()} value={number} />
        );
        console.log(listItems);
        return (
            <ul>
                {listItems}
            </ul>
        );
    }
    const numbers = [1, 2, 3, 4, 5];
    ReactDOM.render(
        <NumberList numbers={numbers} />,
        document.getElementById('app')
    );
</script>