React Props

内容目录

序言

构建 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 差异

JSX 中的 React 元素由 HTML 元素和 JavaScript 组成。
Component 是函数声明或类声明中的返回值。
组件实例即组件实现。

				
					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;

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

功能

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

				
					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

序言

React 组件声明

app.js

fruits.jsx

功能声明

類別宣告

React Components、 Component instance、 Elements 差异

React Props

功能

類別宣告

结论

引用

React 白話文運動系列

相关文章