React 路由的一些基础知识 React-router 是主要的库，react-router-dom 和 react-router-native 是特定环境的库。React-router-dom 通常用于基于浏览器的 Web 应用程序。react-router-native 用于可以使用 react-native 开发的移动应用程序。要安装它，请使用命令 npm install –save react-router-dom 有两种类型的 Web 应用程序路由器。BrowserRouter HashRouter 这两种路由器类型之间的区别在于它们制定 URL 的方式。例如 http://hello.com/about => BrowserRouter 例如 http://hello.com/#/about => HashRouter (使用哈希) BrowserRouter 更流行，它使用 html5 history API 来跟踪位置。HashRouter 支持旧版…… 阅读更多

有多种方法可以将 bootstrap 添加到 react 项目中。使用 bootstrap CDN 安装 bootstrap 依赖项 使用 react bootstrap 包 使用 bootstrap CDN 这是添加 bootstrap 的最简单方法。像其他 CDN 一样，我们可以在 react 项目的 index.html 中添加 bootstrap CDN。下面是一个 react CDN url 如果我们需要 bootstrap 的 JavaScript 组件，那么我们应该在 index.html 中添加 jquery、popper.js 通过这个，完整的 index.html 将如下所示： React App hello             添加 bootstrap 依赖项 npm install bootstrap ... 阅读更多

我们使用 webpack 等工具捆绑 React 应用程序中的文件。捆绑最终会按照导入顺序合并文件并创建一个单个文件。这种方法的问题是，随着文件数量的增加，捆绑文件会变得越来越大。用户可能不会使用所有功能组件，但捆绑包仍在加载它们，这可能会影响应用程序的加载。为了避免这种情况，在 React 中使用了代码分割。示例 捆绑示例 // app.js import { total } from './math.js'; console.log(total(10, 20)); // 42 // math.js export function total(a, b) {    return a ... 阅读更多

html 元素上的 aria-* 属性在 React.js 中也受支持。其他属性通常以驼峰式大小写编写，但这些 aria-* 属性以连字符大小写编写。有时，如果我们在 React.js 中使用父 div，我们会破坏 html 的语义示例 render(){    return(                Test          ); }如果与表格、列表等一起使用，Div 会导致语义问题。为了避免这种情况，我们可以使用 React 提供的片段，如下所示： import React, { Fragment } from ‘react’; function MessageList({ message }) {    return (       ... 阅读更多

React 社区提供了一个关于如何以 React 的方式思考并构建大型、快速和可扩展应用程序的方向。React 已覆盖多个平台，并广泛用作流行的 JavaScript UI 接口库。步骤 1 - 创建一个简单的模拟服务 如果我们需要进行服务器调用并获取数据。我们可以创建一个模拟服务来开始并构建一个组件来获取和显示数据。在这里，我们可以包括组件中的 json 处理和评估预期结果。步骤 2 - 将功能分解成更小的组件 React 最先建议的是创建…… 阅读更多

组合和继承是在 React.js 中将多个组件组合在一起的方法。这有助于代码重用。React 建议尽可能多地使用组合而不是继承，并且仅在非常特殊的情况下才应使用继承。示例以理解它： 假设我们有一个输入用户名组件。继承 class UserNameForm extends React.Component {    render() {       return (                                       );    } } ReactDOM.render(    < UserNameForm />,    document.getElementById('root')); 这很简单，只需输入…… 阅读更多

通常需要在不同的组件之间共享状态。在两个组件之间共享状态的常用方法是将状态移动到两个组件的公共父级。这种方法在 React.js 中称为提升状态。使用共享状态，状态的变化会同时反映在相关组件中。这是共享状态组件的单一事实来源。示例 我们有一个包含 PlayerContent 和 PlayerDetails 组件的 App 组件。PlayerContent 显示玩家姓名按钮。PlayerDetails 一行显示详细信息。App 组件包含两个组件的状态。选定的…… 阅读更多

在受控组件表单中，通过为状态更新编写事件处理程序来由 React 组件处理数据。但在非受控组件中，表单数据由 DOM 本身处理。ref 用于从 DOM 接收表单值。示例 class UserNameForm extends React.Component {    constructor(props) {       super(props);       this.handleFormSubmit = this.handleFormSubmit.bind(this);       this.inputUserName = React.createRef();    }    handleFormSubmit(event) {       console.log('username: ' + this.inputUserName.current.value);       event.preventDefault();    }    render() {       return (                           ... 阅读更多

在 React 中显示 UI 上的列表 Map 是 JavaScript 函数，它将为提供的数组返回一个新数组，如下所示： const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbers = originalNumbers.map( (number)=> number * number); console.log(“Squared Numbers==”squaredNumbers); 在 React 中构建列表类似于使用 map 函数。我们不会只返回一个平方数，而是会返回一个带有平方值的列表元素。 const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbersList= originalNumbers.map((number) =>    {number*number} ); 使用 ui 标签在屏幕上渲染： ReactDOM.render(    { squaredNumbersList },    document.getElementById('root') ); 当…… 阅读更多

使用条件语句可以渲染和移除特定组件。条件处理在 JavaScript 和 React.js 中的工作方式类似。例如函数 `DisplayUserMessage(props)`：    `const user = props.user.type;`    `if (type === 'Player') {`       `return Player;`    `}`    `if (type === 'Admin') {`       `return Admin;`    `}` 上面的例子使用了 `if` 语句。用户的类型决定了返回哪条消息。组件的局部状态对于决定条件渲染很有用，因为状态可以在组件内部灵活地更改。 使用逻辑 `&&` 运算符的内联 `if` 语句：`function MessageSizeChecker(props) {`    `const message = props.message;`    `return (`       `... 阅读更多