Array
- Data combination{} rendering
- react can directly expand the array and render the elements to the page
- Render to the page as a string
The elements in the array are numeric
<script type="text/babel">
// react 可以直接展开数组，将元素渲染到页面
const arr = [1, 2, 3];
ReactDOM.render(<div>
{
arr}
</div>, document.querySelector("#root"));
</script>
The elements in the array are labels
- Tags will be parsed into html tags
<div id="root"></div>
<script type="text/babel">
// react是可以直接展开数组的。
const arr = [<h1>1</h1>, <h2>2</h2>, <h3>3</h3>];
ReactDOM.render(<div>
{
arr}
</div>, document.querySelector("#root"));
</script>
map traversal array rendering
- To traverse the list in react, you need to specify the key value, you can use the map method to map
note:
When traversing the map, you need to add the value of the key
Variables need to use difference expression {}, wrapped in curly braces
<div id="root"></div>
<script type="text/babel">
const arr = ["21天精通JAVASCRIPT", "大前端", "web前端工程的自我修养"];
ReactDOM.render((
<div>
{
arr.map(v => "《" + v + "》")
}
</div>
), document.querySelector("#root"));
</script>
map traverses the array and adds p tag rendering without binding key
- The p tag will be parsed to the page
- An error will be reported if the key is not bound, but it can be rendered normally
<div id="root"></div>
<script type="text/babel">
const arr = ["21天精通JAVASCRIPT", "大前端", "web前端工程的自我修养"];
ReactDOM.render((
<div>
{
arr.map(v => (
<p>《{
v}》</p>
))
}
</div>
), document.querySelector("#root"));
</script>
map traverses the array to add p tag rendering, bind the key, no error will be reported
<div id="root"></div>
<script type="text/babel">
const arr = [{
id: 1,
newsTitle: "2020年春节为何来得“早”？",
newsHref: "https://new.qq.com/rain/a/20200113A03ZX900"
}, {
id: 2,
newsTitle: "印媒关注中国在西藏展示两种新武器，其中一种是世界独一份",
newsHref: "https://new.qq.com/omn/20200112/20200112A0AF2J00.html"
}];
ReactDOM.render((
<div>
{
arr.map(v => (
<p key={
v.id}>
<a href={
v.newsHref}>{
v.newsTitle}</a>
</p>
))
}
</div>
), document.querySelector("#root"));
</script>
map traverses the array to add p tags, call function rendering
<div id="app"></div>
<script type="text/babel">
const arr = ['G', 'M', 'L'];
const arr2 = ['H', 'E', 'L', 'L', 'O'];
function showList(arr) {
return arr.map((item, index) =>
<p key={
index}>{
item}</p>
)
}
ReactDOM.render(<div>
{
showList(arr)
}
{
showList(arr2)
}
</div>, document.querySelector('#app'));
</script>
Render object
- Convert the object to an array and then traverse
- You can use Object.keys() or Object.values() to convert attributes or attribute values into arrays
- Then traverse
<div id="app"></div>
<script type="text/babel">
const obj = {
a: 'G', b: 'M', c: 'L'};
let curIndex = 0;
function showList(params) {
return (
<ul>
{
// 转换为 数组再进行遍历
Object.values(params).map((item, index) => (
// 使用 className
<li key={
index} className={
index === curIndex ? 'active' : ''} onClick={
() => {
curIndex = index; // 赋值索引
render(); // 赋值完后，重新调用渲染
}}>{
item}</li>
))
}
</ul>
)
}
function render() {
ReactDOM.render(<div>
{
showList(obj)
}
</div>, document.querySelector('#app'));
}
render();
</script>