React Props - React 09

React Props - React 09

序言

构建 React 项目 - React Vernacular 活动 08 介绍如何构建 React 项目:设置环境、构建项目和启动项目。

本文将详细介绍 React 语法。 React JSX – React 06 您将学习如何构建 React 组件,并了解组件具有父子关系。本文将介绍 React Props 的概念,包括React 组件声明、React Props。

React 组件声明

在此,让我们使用上一篇 JSX 文章中的语法来复习 React 组件和声明的语法。

				
					import React from 'react'; import ReactDOM from 'react-dom/client'; const myElement = ( <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> < /ul> ); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
				
			

从上面的代码中可以看到,一个名为 myElement 的元素首先在根文件中声明并呈现。不过,除了在一个文件中渲染外,还可以从另一个文件中加载写入的元素。

首先,我修改了上述文件,并将其命名为 app.js。我还声明了一个名为 fruit.jsx 的组件,并声明了两次。

app.js

				
					import React, { Component } from &#039;react&#039;; import Fruit from &#039;./fruits&#039;; class App extends Component { render() { return (
            <div classname="App">
                <ul>
                    <fruit fruit_name="banana"/>
                    <fruit fruit_name="apple"/>
                </ul>
            </div>

        ); } } export default App;
				
			

fruits.jsx

功能声明

				
					import React from &#039;react&#039;; const Fruit = (props) =&gt; { return <p> this is {props.fruit_name}.</p>
} export default Fruit;

				
			

類別宣告

				
					import React from &#039;react&#039;; class Fruit extends React.Component { render() { return (
        <p> this is {this.props.fruit_name}.</p>
      ); } } export default Fruit;

				
			

这两种方法都可以用来传递道具,但现在使用函数声明更为常见,因为函数声明的编写相对简单。

React Components、 Component instance、 Elements 差异

  1. JSX 中的 React 元素由 HTML 元素和 JavaScript 组成。
  2. Component 是函数声明或类声明中的返回值。
  3. 组件实例即组件实现。
				
					import React, { Component } from &#039;react&#039;; const Fruit = (props) =&gt; { // Fruit() 为component return <p> this is {props.fruit_name}.</p> // <p></p> 里面的为element } const banana = <fruit fruit_name="banana" /> // banana 为元件的实例component instance class App extends Component { render() { return (
            <div classname="App">
                <ul>
                    {banana}
                    <fruit fruit_name="apple" />
                </ul>
            </div>

        ); } } export default App;

				
			

React Props

在父组件和子组件中,如果要传递参数值(类似于函数中的参数概念),可以使用道具来实现。不过,函数声明的组件与类声明的组件有一些不同之处。

功能

可以发现,函数声明与引用类似,因此在使用外部组件时,只要使用参数就可以导入,而函数组件本身只要使用道具就可以导入。

				
					import React from &#039;react&#039;; const Fruit = (props) =&gt; { return <p> this is {props.fruit_name}.</p>
} export default Fruit;
				
			

類別宣告

类本身是一种面向对象的编程语言概念,类拥有自己的变量,而道具则通过 { this.props.[variable name]} 传入。

				
					import React from &#039;react&#039;; class Fruit extends React.Component { render() { return (
        <p> this is {this.props.fruit_name}.</p>
      ); } } export default Fruit;
				
			

结论

本文章将解释 React props 参数传递的概念,以及声明组件的不同方式。

它还解释了 React 组件、组件实例和元素之间的区别。

希望以上内容对读者有所帮助。

如果您有任何建议或问题,欢迎留言!

引用

React 白皮书活动 10-React Props

React 白話文運動系列

构建 React 项目 - React Vernacular 活动 08

Babel & Webpack & NPM - React 白皮书活动 07

React JSX – React 06

React 如何工作 - React 05

JavaScript 高级函数 - React 04

JavaScript 异步等待 - React 白话运动 03

JavaScript ES6 对象 - React 白皮书活动 02

JavaScript ES6 - React 白皮书活动 01

 

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

zh_CN简体中文