js 调用react组件_React JS组件简介

偏执的太偏执、 2023-03-05 12:57 31阅读 0赞

js 调用react组件

In this article, I will help you walk through the **process of creating or working with React JS components** for your projects.

在本文中，我将帮助您**逐步完成**为项目**创建或使用React JS组件**的**过程** 。

As it's always said, everything in React JS is all about components.

就像常说的那样，React JS中的所有内容都与组件有关。

I suggest reviewing some recent articles that will be of help too.

我建议回顾一些最近的文章，这些文章也会有所帮助。

## 什么是成分？ **(**what are components?**)** ##

In React JS, **components** are like functions in vanilla Js (the basic JavaScript for all browsers) which help us perform some tasks.

在React JS中， **组件**就像Vanilla Js(所有浏览器的基本JavaScript)中的函数一样，可以帮助我们执行某些任务。

In React JS, **components** can be used to render an HTML code to an HTML element (like a div) or root node.

在React JS中， **组件**可用于将HTML代码呈现为HTML元素(如div)或根节点。

**Example:**

**例：**

Class App extends React.Component
    render () {
        
    return (
    <h1> hello react noobs!  </h2>
    	)
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));

Components are reusable blocks of code just like JavaScript functions that can be reused over and over.

组件是可重复使用的代码块，就像可以反复使用JavaScript函数一样。

From the example above, you can see that I created a class called App which is passed as the first parameter (using the syntax **<App />**) in the **ReactDOM.render() method**.

从上面的示例中，您可以看到我创建了一个名为App的类，该类作为第一个参数(使用语法**<App />** )在**ReactDOM.render()方法中传递** 。

The component above is called a class component because it makes use of ES6 classes or uses the word class to create the component.

上面的组件称为类组件，因为它利用ES6类或使用单词class来创建组件。

The component above can be added in any piece of code or another component by using the component's name in the syntax : < ... /> as seen in the example above.

可以使用以下语法中的组件名称将上述组件添加到任何代码段或另一个组件中： <... />如上例所示。

**Syntax:**

**句法：**

Class yourclassname extends React.Component
    render () {
        
    	return (
    		// your code enters here
    	)
    }
    
    ReactDOM.render(<.../>, document.getElementById('root'));

Your class component must include **render()** and **return()**. The **return()** must have one parent element.

您的类组件必须包含**render()**和**return()** 。 **return()**必须具有一个父元素。

### 功能组成 **(**Function Components**)** ###

There is another type of component called the **function component or the simple component**. The name was given as such because it doesn't use the class keyword to create the component and also because it's more like a function in vanilla JS in syntax.

还有另一种类型的组件，称为**功能组件或简单组件** 。 之所以这样命名，是因为它不使用class关键字来创建组件，也因为它更像是语法上的Vanilla JS中的函数。

**Example:**

**例：**

function App () {
        
    	return ( 
    		<h2>  Hello React Noobs! </h2>
    	)
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));

You can equally write same code using arrow functions,

您同样可以使用箭头功能编写相同的代码，

const x App = ( ) => {
        
    	return <h2> Hello world </h2> ;
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));

From the code above, you can see the function component has just the **return()** statement without the **render()**.

从上面的代码中，您可以看到函数组件只有**return()**语句，而没有**render()** 。

**Also, note that**: If the content of **return()** is only one line, you can remove the parenthesis.

**另外，请注意** ：如果**return()**的内容仅一行，则可以删除括号。

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question.

感谢您与我编码！ 下次见。 随意发表评论或问题。

> 翻译自: [https://www.includehelp.com/react-js/introduction-to-react-js-components.aspx][https_www.includehelp.com_react-js_introduction-to-react-js-components.aspx]

js 调用react组件

[https_www.includehelp.com_react-js_introduction-to-react-js-components.aspx]: https://www.includehelp.com/react-js/introduction-to-react-js-components.aspx