react把表格渲染好ui_react 入坑笔记（五） - 条件渲染和列表渲染

条件渲染和列表渲染

一、条件渲染

条件渲染较简单，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

贴一个小栗子：

function UserGreeting(props) {

return

欢迎回来!

;

}

function GuestGreeting(props) {

return

请先注册。

;

}

function Greeting(props) {

const isLoggedIn = props.isLoggedIn;

if (isLoggedIn) {

return ;

}

return ;

}

ReactDOM.render(

// 尝试修改 isLoggedIn={true}:

,

document.getElementById('example')

);

当然，得益于 jsx 的语法，我们可以用变量来缓存元素或者组件：

function UserGreeting(props) {

return

欢迎回来!

;

}

function GuestGreeting(props) {

return

请先注册。

;

}

function Greeting(props) {

const isLoggedIn = props.isLoggedIn;

if (isLoggedIn) {

return ;

}

return ;

}

function LoginButton(props) {

return (

登陆

);

}

function LogoutButton(props) {

return (

退出

);

}

class LoginControl extends React.Component {

constructor(props) {

super(props);

this.handleLoginClick = this.handleLoginClick.bind(this);

this.handleLogoutClick = this.handleLogoutClick.bind(this);

this.state = {isLoggedIn: false};

}

handleLoginClick() {

this.setState({isLoggedIn: true});

}

handleLogoutClick() {

this.setState({isLoggedIn: false});

}

render() {

const isLoggedIn = this.state.isLoggedIn;

let button = null;

if (isLoggedIn) {

button = ;

} else {

button = ;

}

return (

{button}

);

}

}

ReactDOM.render(

,

document.getElementById('example')

);

阻止渲染的栗子：

function WarningBanner(props) {

if (!props.warn) {

return null; // 必须写 null，不写运行会报错

}

return (

警告!

);

}

class Page extends React.Component {

constructor(props) {

super(props);

this.state = {showWarning: true}

this.handleToggleClick = this.handleToggleClick.bind(this);

}

handleToggleClick() {

this.setState(prevState => ({

showWarning: !prevState.showWarning

}));

}

render() {

return (

{this.state.showWarning ? '隐藏' : '显示'}

);

}

}

ReactDOM.render(

,

document.getElementById('example')

);

注意：组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。例如，componentWillUpdate 和 componentDidUpdate 依然可以被调用。

二、列表渲染

列表渲染可以使用 js 中的 .map() 来进行。(map 返回一个经过逻辑处理的新数组)

function NumberList(props) {

const numbers = props.numbers;

const listItems = numbers.map((number) =>

{number}

);

return (

• {listItems}

);

}

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

ReactDOM.render(

,

document.getElementById('example')

);

和 vue 相同，需要给每个列表元素绑定一个 key，便于 React 识别哪些元素发生了变化。

function ListItem(props) {

return

{props.value};

}

function NumberList(props) {

const numbers = props.numbers;

const listItems = numbers.map((number) =>

);

return (

{listItems}

);

}

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

ReactDOM.render(

,

document.getElementById('example')

);

注意：key 会作为给 React 的提示，但不会传递给组件，因此，组件并不会知道传递给它的 key。

在 jsx 中使用 map()：

function ListItem(props) {

return

{props.value};

}

function NumberList(props) {

const numbers = props.numbers;

return (

{numbers.map((number) =>

value={number} />

)}

);

}

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

ReactDOM.render(

,

document.getElementById('example')

);

对比一下，只是少了声明 listItems 语句，并把后面的 map() 搬到 jsx 中。