顺序和条件和循环语句
顺序语句
- 在JSX语法中,顺序语句是默认的,不需要特别指定,它可以通过组件直接渲染
function UserName() {
return (
<>
<h1>我是用户姓名</h1>
<h2>测试显示没显示 </h2>
</>
);
}
function Order() {
return (
<div>
<h1>Hello</h1>
<h2>Good to see you </h2>
<UserName></UserName>
</div>
);
}
条件语句
React 中的条件渲染和 JS 一样,使用 if 或者条件运算符来创建元素表现当前的状态
if 条件
- 创建两个组件,一个用于用户登录,一个用于用户未登录,根据用户是否登录,来不同的渲染
function UserGreeting() {
return <h1>Welcome back!</h1>;
}
function GuestGreeting() {
return <h1>Please sign up</h1>;
}
- 在Order组件中,根据用户是否登录,来不同的不同的渲染
function Order(props) {
const { isAuthenticated } = props; // 如果是真 就是UserGreeting,否则是GuestGreeting
return (
<div>
<h1>Hello</h1>
<h2>Good to see you </h2>
<UserName></UserName>
{isAuthenticated ? <UserGreeting /> : <GuestGreeting />}
</div>
);
}
与逻辑与一起用
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 && (
<h2>You have {unreadMessages.length} unread messages.</h2>
)}
</div>
);
}
const messages = ["React", "Re: React", "Re:Re: React"];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById("root"),
);
三目运算符
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
列表语句
- 可以利用 map 循环 必须返回
- 返回的时候最外层必须有包裹层
- 列表循环必须要有 key,否则一定会报错误
入门
我们使用 Javascript 中的 map()方法来遍历 numbers 数组,将数组中的每一个元素变成 li 标签,最后我们将得到的数组赋值给 listitems
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{number}</li>);
我们把整个 listitems 插入到 ul 元素中去,然后渲染 DOM
ReactDOM.render(<ul>{listItems}</ul>, document.getElementById("root"));
基础列表组件
- 渲染一个列表组件
const numbers = [1, 2, 3, 4, 5];
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) => {
<li key={number.toString()}>{number}</li>;
});
return <ul>{listItems}</ul>;
}
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById("root"),
);
Key值必须独一无二
数组元素中的 key 在兄弟节点中应该是独一无二的,当我们生成两个不同的数组的时候，我们可以使用相同的 key 值
function Blog(props) {
//左边第一个组件
const sidebar = (
<ul>
{props.posts.map((post) => {
<li key={post.id}>{post.title}</li>;
})}
</ul>
);
//右边一个组件
const content = props.posts.map((posts) => {
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>;
});
return (
<div>
{sidebar}
<hr />
{content}
</div>
);
}
const posts = [
{ id: 1, title: "Hello,world", content: "Welcome to learning" },
{ id: 2, title: "Hello,world", content: "Welcome to learning" },
];
ReactDOM.render(<Blog posts={posts} />, document.getElementById("root"));
注意事项
- 分支语句
{true}或者{null}都不会被渲染 - 循环语句最外层必须有包裹层
- 循环语句必须要有 key,否则一定会报错误