Can reactjs use template tags? Use it like vue?

for example, there is a "repeater component" in which the next level of the content of a ul package should be a li tag. It seems that react return can only be one li at a time, but every time I want to output more than one li, I think of wrapping it in template. I try it without error, but nothing is shown in the blank page

.

clipboard.png 


<Repeater list={[""]} />
React.js javascript
Jul.02,2022

the reason is that template is parsed as a native element by react, which is not available in browsers, so there will be problems.

react is the native element
depending on whether your Tag initials are lowercase.

that's because your browser supports template tags. You can take a look at webcomponents

found the answer

from-a-component-with-react-16/" rel=" nofollow noreferrer > Link 

import React, { Component } from 'react';

export default class Repeater extends Component {
  render() {
    console.log(this.props);
    return (
      <ul>
        {this.props.list.map((item, index) => {
          return (
-             <template key={index}>
+            <React.Fragment key={index}>
              <li>{item}</li>
              <li>{item}</li>
              <li>{item}</li>
+            </React.Fragment>
-            </template>
          );
        })}
      </ul>
    );
  }
}

import React, { Component } from 'react';

export default class Repeater extends Component {
  render() {
    console.log(this.props);
    return (
      <ul>
        {this.props.list.map((item, index) => {
          return (
              <li key={index}>{item}</li>
          );
        })}
      </ul>
    );
  }
}

Previous: Js exports Excel by splicing table, but there are more than 50, 000 rows of data, and a network error occurs when you click to download

Next: How does react enable tag to switch pages and maintain the previous state?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu