Learning Notes

# React 小 Tips

# 阻止组件渲染

在极少数情况下, 你可能希望能隐藏组件, 即使它已经被其他组件渲染.若要完成此操作,你可以让 render 方法直接返回 null,而不进行任何渲染.


 
 
 




function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return <div className="warning">Warning!</div>;
}
1
2
3
4
5
6
7

# key的正确用法


 
 





 
 










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} />
  ));
  return <ul>{listItems}</ul>;
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById("root")
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

TIP

  1. key 只是在兄弟节点之间必须唯一

  2. key 会传递信息给 React ,但不会传递给你的组件.如果你的组件中需要使用 key 属性的值,请用其他属性名显式传递这个值.

← 组合组件 →