天道酬勤,学无止境

Using props in React style attribute 相关文章

原文信息:Using props in React style attribute

(I am using JSX with ES6 syntax) This works: render() { return ( <div style={{ width: '95%' }}></div> ) } This doesn't work: (why not?) Edit: It actually does work render() { return ( <div style={{ width: this.props.progress + '%' }}></div> ) } Edit: It works but the style value has to be a valid value else it will return the error. I use the state to create the style object and clean out the property with a regular expression in the constructor, so it will not be error-ing again because of invalid values. Here is my solution: import React, { Component, PropTypes } from 'react' export default


更多相关搜索:点击搜索查看



CSS-IN-JS 方案 - Emotion 库
CSS-IN-JS "CSS in JS" 是一种在 JavaScript 文件中集成 CSS 代码的解决方案。 这种方案旨在解决 CSS 的局限性,例如缺乏动态功能,作用域和可移植性。 为什么会有 CSS-IN-JS 缺乏作用域缺乏可移植性缺乏动态功能 其它参考:阮一峰 - CSS in JS 简介 缺乏作用域 以前开发 web 项目都是以**“页面”为单位,为了将关注点分离**,一般都是将 CSS、JS 以文件的方式引入 HTML 文件。 而现在开发 web 项目都是以**“组件”**为单位,所以很多开发者更倾向于将同一个组件的 HTML、CSS、JS 代码都集成在一起。(例如 React 中已经通过 JS 编写 HTML 代码) 这样组件与组件间的 CSS 就不会产生冲突,这使用的是作用域的概念,而 CSS 没有作用域。 CSS-IN-JS 方案就是通过 JavaScript 的作用域模拟 CSS 的作用域。 缺乏可移植性 将 CSS 文件集中在组件中,这样在使用组件的时候,可以避免遗漏引入必要的 CSS 文件。 缺乏动态功能 CSS 无法通过条件判断,决定给元素设置哪些样式。 如果将 CSS 写在 JavaScript 的文件中,就可以用 JS 的动态功能给元素添加样式了。 CSS-IN-JS 方案的优缺点 CSS-IN-JS 方案的优点大于缺点,是值得在 React

2022-02-11 14:39:18    分类:博客    

React testing library: Test attribute / prop
I'm writing a React app using TypeScript. I use material-ui for my components and react-testing-library for my unit tests. I'm writing a wrapper for material-ui's Grid component so that I always have an item. import Grid from "@material-ui/core/Grid"; import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles"; import React, { PureComponent } from "react"; import styles from "./styles"; export interface OwnProps { className?: string; } export interface Props extends WithStyles<typeof styles>, OwnProps {} export interface DefaultProps { className: string; } export class

2021-06-13 17:52:44    分类:问答    reactjs   typescript   unit-testing   jestjs   react-testing-library

警告:收到非布尔属性的“假”。 如何为自定义布尔属性传递布尔值?(Warning: Received `false` for a non-boolean attribute. How do I pass a boolean for a custom boolean attribute?)
问题 Warning: Received `false` for a non-boolean attribute `comingsoon`. If you want to write it to the DOM, pass a string instead: comingsoon="false" or comingsoon={value.toString()}.

2022-03-23 09:06:45    分类:技术分享    reactjs   styled-components   react-16

react prop-types 属性验证学习
文章目录 文章参考默认属性 和 属性验证两种语法static 静态属性原型链,类赋值变量 prop-types类型配置组件属性基本数据类型和propTypes属性的对应关系引用对象的验证判断是否是某个类型限制属性在特定的数值中限制属性可以是多种类型之一确定类型的数组对象中的value值全为数字验证属性的样式是否符合样式的设置 是否必填 文章参考 git官方文档react中的属性验证 默认属性 和 属性验证两种语法 import PropTypes from 'prop-types' 作为类型验证的模块 static 静态属性 import React, { Component } from 'react' import PropTypes from 'prop-types' export class MyAppComp extends Component { // 定义静态属性 static propTypes = { name: PropTypes.string, age: PropTypes.number, sex: PropTypes.oneOf(['男', '女']), // 只能是数组里面的某一个值 } // 设置默认属性 static defaultProps = { name:'Stranger' } render() { return ( <div> </div>

2021-11-01 14:16:19    分类:博客    

React: Material-UI GridListTile looses style attributes when called from within component
I have a UI where I render a <GridList> with tiles that I define as custom components. When I first wrote this, I was a bit confused about the nature of React hooks, how props are passed etc. So, I was calling it as a regular JS function: const VideoTile = ({...props}) => { const { url, classes } = props; return ( <GridListTile key={url} cols={1} className={classes.videoTile} > <video src={url} className={classes.videoPreview} /> <GridListTileBar title={url} /> </GridListTile> ) } const VideoBrowser = ({...props}) => { const {vidUrls, classes} = props; //for the sake of brevity return (

2022-04-30 01:50:00    分类:问答    reactjs   material-ui   virtual-dom

react
# 组件和jsx ## react组件 jsx文件,里面是jsx语法生成的dom ## jsx语法 jsx除了是文件后缀外,在组件内还是一种语法。 `<img/>`这个jsx语法是`React.createElement('img')`语法糖 ## 样式绑定 类名样式:className 内联样式/行内样式:`style={{color:'red'}}` 第一个括号表示表达式,第二个是对象 ## 样式作用域 - 默认情况下,样式在组件内引入后,作用域是全局的; - 使用name.module.css命名样式后,作用域就只是当前组件内生效; ## 资源引入img 背景图就是使用相对路径 前景图img用`require('相对路径').default` ## React组件三种写法 - function无状态组件,只接受一个props - class es6的写法,继承React.Component - hook新特性,让函数组件拥有全部react特性 - 【废弃】createClass # api和指令 ## dangerouslySetInnerHTML/非dom属性 - 渲染字符串dom片段的,底层做了防注入攻击了。 - 但是一般很多情况下,不推荐使用。 ## React.createElement 创建虚拟dom的,`<div/>`jsx语法是它的语法糖,也就是对他的封装。 #

2022-03-10 23:44:27    分类:博客    

React beautiful DnD drag out of position problem
I created a draggable drag and drop table with draggable rows. I'm using react beautiful-dnd for this. When I drag a row, the row gets out of position instead on the position of my cursor. When I drag a row, the row gets position: fixed and some top and left styling. I suspect thats the issue, but why does it get the wrong numbers, so that its causing to not show on the right position? This GIF will show the problem. This is my full code: import update from "immutability-helper"; import * as React from "react"; import * as ReactDnD from "react-dnd"; import { WithNamespaces, withNamespaces }

2022-03-09 01:05:16    分类:问答    reactjs   react-beautiful-dnd

在自定义 React 元素上添加 style 属性似乎没有回升(Adding style attribute on custom React element does not seem to pick up)
问题 我有如下代码(使用 CSS 模块): return ( <div> <LandingPage className={styles.hidden} /> </div> ); 哪个不起作用(即不将 CSS 应用于元素)。 然而,回归 <div> <div className={styles.hidden}> <LandingPage /> </div> </div> 工作得很好。 为什么在自定义元素上应用className会导致类被忽略? 回答1 这里className不会直接应用于LandingPage组件,它基本上是您从父组件传递到子组件的props值,您需要在LandingPage组件中应用该类。 像这样: <LandingPage customClassName={styles.hidden} /> 内部LandingPage : render(){ console.log('class name', this.props.customClassName); return( <div className={this.props.customClassName}> {/* other elements */} </div> ) } 永远记住props 是一个对象,你从父组件传递的任何数据都只会成为 props 值的一部分,你需要在子组件的某个地方使用这些数据。

2021-10-15 19:02:55    分类:技术分享    javascript   reactjs   css-modules

React 包装器:React 无法识别 DOM 元素上的 `staticContext` 属性(React wrapper: React does not recognize the `staticContext` prop on a DOM element)
问题 我正在尝试围绕 react-router-dom NavLink组件创建一个包装器组件。 我希望我的自定义组件接受所有 NavLinks 道具,并将它们代理到NavLink 。 但是,当我这样做时,我得到: 警告:React 无法识别 DOM 元素上的staticContext 。 如果您有意希望它作为自定义属性出现在 DOM 中,请将其拼写为小写的staticcontext 。 如果您不小心从父组件传递了它,请将其从 DOM 元素中删除。 可以在此处找到该问题的工作演示: https://codesandbox.io/s/w0n49rw7kw 回答1 有一种克服方法是使用: const { to, staticContext, ...rest } = this.props; 所以你的...rest永远不会包含staticContext 回答2 这是 React 文档中记录的简单解决方案的常见问题: 如果您尝试使用 React 未识别为合法 DOM 属性/属性的 prop 来渲染 DOM 元素,则会触发 unknown-prop 警告。 你应该确保你的 DOM 元素没有浮动的虚假道具。 展开运算符可用于将变量从 props 中拉出,并将剩余的 props 放入变量中。 function MyDiv(props) { const { layout, ...rest } =

2021-10-22 02:02:00    分类:技术分享    reactjs   react-router   react-router-dom

将SVG嵌入到ReactJS中(Embedding SVG into ReactJS)
问题 是否可以将SVG标记嵌入到ReactJS组件中? render: function() { return ( <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ... </span> ); } 结果错误: 不支持命名空间属性。 ReactJSX不是XML。 最简单的方法是这样做。 使用React React之类的东西对于我想做的事情来说是过大的手段。 回答1 更新2016-05-27 从React v15开始,React中对SVG的支持与当前浏览器对SVG的支持(接近?)达到100%奇偶校验(源)。 您只需要应用一些语法转换就可以使其与JSX兼容,就像您已经对HTML所做的一样( class → className , style="color: purple" → style={{color: 'purple'}} )。 对于任何命名空间(用冒号分隔)的属性,例如xlink:href ,删除:并大写该属性的第二部分,例如xlinkHref 。 这是具有<defs> , <use>和内联样式的svg的示例: function SvgWithXlink (props) { return ( <svg width="100%" height="100%" xmlns=

2021-04-10 03:07:32    分类:技术分享    javascript   svg   reactjs

React基础一
目录 react相关说明 react不能像Vue一样直接在浏览器运行React的快速构建工具通过CRA来构建项目 构建流程常见问题 react元素与组件 React元素函数式组件类组件辅助工具 组件的传参和接参组件的组合和嵌套 组件的组合组件的嵌套在子组件中显示父组件中子组件书写的内容 jsx原理【 了解 】组件中的DOM样式React的数据定义问题 属性状态 属性props验证jsx里面的注释属性vs状态 相同点不同点stateprops使用场景总结 状态提升状态组件 说明 React中使用的是 es6 模块化规范 (即import引入,exports default导出) React是不能直接在浏览器中运行的,我们必须借助工具才能运行React程序 因为React是jsx,它必须经过webpack编译为js才能运行 React的快速构建工具 脚手架作用:快速构建一个项目类型 CRA [ 大纲要求 - react官方推荐的 ]DvaUmi 通过CRA来构建项目 构建流程 安装CRA [ create-react-app ] 全局安装 yarn add create-react-app globalcnpm i create-react-app -g 临时使用 [ npx ] npx create-react-app 项目名称 安装需要等待一段时间,这个过程实际上会安装三个东西

2021-04-20 13:18:18    分类:博客    

如何有条件地添加属性以响应 DOM 元素(How to conditionally add attributes to react DOM element)
问题 我有一个场景,我使用 React.js 使用以下代码创建一个 div: React.createElement('div', {}, "div content") 一些额外的 javascript 处理将允许我之后推断这个 div 是否需要将 className 属性设置为“ClassA”或“ClassB”,或者它根本不应该有 className。 javascript 中有没有办法访问从 React DOM 创建的 div 并将 className 属性添加到其中? 注意:我无法实现这是 JSX,所以我求助于 createElement 方法。 编辑:值得一提的是,我可能需要有条件地添加 className 以外的属性。 例如,我可能需要根据条件逻辑向锚标记添加或不添加“alt”属性。 先感谢您。 回答1 使用 JSX 传播。 使用 props 构建和对象,根据需要修改它并将其传递给组件,如下所示: const props = { name: 'SomeName' } if (true) { props.otherName = 'otherName'; } return ( <SomeComponent {...props}/> ); 看到那个...语法了吗? 该扩展运算符完成了这项工作 - 所有道具最终都将作为您组件上的单独属性。 看看这个 plunk:http:/

2021-12-21 17:57:13    分类:技术分享    javascript   reactjs   attributes   conditional   react-jsx

How to test style for a React component attribute with Enzyme
I am trying to test a style attribute for a React component. What is the best way to get style params in the test? At this moment, my best option is to test if the HTML includes the string, but I think there is a better option. Case: it('Should render large image when desktop', () => { const dummyUrl = 'http://dummyUrl'; const wrapper = shallow( <MockedStore initialState={{ app: fromJS({ browser: { desktop: true } }), }} > <LandingHero bigImage={dummyUrl} /> </MockedStore> ); }); The Component to test is: // @flow import React, { Component } from 'react'; import gc from 'styles/core.scss'

2021-04-09 06:53:08    分类:问答    reactjs   enzyme

reactjs中的传播语法“...this.props”感觉很奇怪(spread syntax "...this.props" in reactjs feels odd)
问题 使用扩展运算符对 JSX 中的props对象做出反应似乎没有输出我期望的内容。 <Text {...this.props} /> 似乎被渲染成style="foo" ,它应该是style:"foo"记录在这里。 我在任何地方都找不到这个文档。 我对反应完全陌生,我正在尝试理解语法并想知道反应是否在内部执行了这样的未记录的事情。 一个简单的测试突显了我的困惑: const x = {...{test:1}}.test; alert(x); 被警告 1 这肯定不会编译: <Text test: 1 /> 回答1 这在此处的 React 文档中有所记录。 要在此处复制粘贴,它指出: 如果你已经有 props 作为对象,并且你想在 JSX 中传递它,你可以使用 ... 作为“传播”操作符来传递整个 props 对象。 它是完全有效的、记录在案的 JSX。 此外,它们提供了将 props 传递给组件的两种不同方法的示例——一种作为离散属性,一种作为传播对象——并注意,就接收 props 的组件而言,它们是相同的: function App1() { return <Greeting firstName="Ben" lastName="Hector" />; } function App2() { const props = {firstName: 'Ben', lastName:

2021-10-23 23:55:52    分类:技术分享    javascript   reactjs   spread-syntax

react
React基础知识点 目标 能够说出React是什么能够说出React的特点能够掌握React的基本使用能够使用React脚手架 什么是React (★★★) React是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来 特点 声明式 你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI 基于组件 组件时React最重要的内容,组件表示页面中的部分内容 学习一次,随处使用 使用React可以开发Web应用,使用React可以开发移动端,可以开发VR应用,可以结合react-native angular-ionic、vue-weex React基本使用 React的安装 npm i react react-dom react 包是核心,提供创建元素,组件等功能react-dom 包提供DOM相关功能 React的使用 引入react和react-dom的两个js文件 <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> 创建React元素 // 创建元素节点 // 1

2021-12-26 12:23:44    分类:博客    

React基础学习
一、学习主要内容 ​ 浏览器原理建设高性能网站组件开发高级语法SSRReduxReact RouterReact UIcreate-react-app单元测试ReactNative项目实战 1.1 获取react Git地址: https://github.com/facebook/react 获取React: npm install react react-dom 注: 在ES5开发中,可以通过bower获取react.js和react-dom.js文件,我们使用最新版本中,只能使用ES6开发 二、 组件开发 2.1 创建虚拟DOM 核心库: react提供了createElement方法用来创建虚拟DOM 第一个参数表示虚拟DOM名称(也可以是组件名称)第二个参数表示虚拟DOM的属性对象从第三个参数开始,表示子虚拟DOM 2.2 虚拟DOM简介 虚拟DOM是一个普通js对象,存储一些必要属性来描述DOM type 表示虚拟DOM类型key 表示虚拟DOM的idref 表示对真实DOM的引用props 表示虚拟DOM中所有属性对象children 表示虚拟DOM的子虚拟DOM字符串 表示一个文本节点对象 表示一个虚拟DOM数组 表示多个虚拟DOM或者文本。 2.3 渲染虚拟DOM 浏览器端渲染库react-dom,提供了render方法,可以渲染虚拟DOM

2022-03-18 01:01:39    分类:博客    

react基础
react依赖包下载 npmjs.com 1.react样式 1.全局写法: 引入:import './app.scss' 使用:<p className="box"}>全局样式</p> 2.局部样式写法: 引入:import styles from './app.module.scss' 使用:<p className="styles.box">局部样式</p> 文件命名:App.module.scss 在局部中使用全局: :global 3.直接使用样式 <p style={{width:'100px',height:'100px'}}></p> 4.类名操作: 安装:cnpm i classnames -d 引入:import cl from 'classnames' //cl是一个函数 使用:<p className={ a:true, b:true, c:false }></p> 5.样式组件 引入 :import styled from 'styled-components' 创建组件:const a = styled.div` width:100px;height:100px ` 使用:<a/> 使用逻辑: 1.在创建时:background: ${props => props.color||'red'}; //这里写了一个小逻辑 2.在类组件中 color =

2022-03-13 02:17:38    分类:博客    

React 中如何使用布尔属性?(How are boolean props used in React?)
问题 我试图澄清一些关于 React 中布尔属性的混淆(最好来自权威​​来源)。 假设一个MyComponent有几个布尔道具prop1 , prop2 ... 首先:似乎布尔道具就像其他道具一样:您可以在 defaultProps 或解构参数中定义默认值: const MyComponent = ({ prop1, prop2 }) => ( ... ) MyComponent.defaultProps = { prop1: false, prop2: true, } 或者等效地(不?) const MyComponent = ({ prop1 = false, prop2 = true }) => ( ... ) 不清楚的是如何传递值。 再一次,自然的“React 风格”似乎是 <MyComponent prop1={ BOOLEAN_EXPRESION1 } prop2={ BOOLEAN_EXPRESION2 } /> ...包括静态文字( false/true )。 然而,它也指出传递布尔属性的正确(推荐?)方法是属性的存在/不存在,正如 HTML5 所规定的那样。 因此,应该编写<MyComponent prop1 />而不是<MyComponent prop1={true} prop2={false} /> <MyComponent prop1 /> 。 我的问题是:

2021-10-26 15:33:37    分类:技术分享    reactjs   boolean   jsx   react-props

react-grid-layout 示例 Unknown prop `_grid` on 标签(react-grid-layout example Unknown prop `_grid` on <div> tag)
问题 我正在尝试实现react-grid-layout 。 所有示例都通过_grid div 属性传递网格项配置: createElement(el) { ... return ( <div key={i} _grid={el}> ... </div> ); }, 在我的实现中: return ( <div key={i} _grid={el}> <DashboardTestWidget widgetName={el.name} menuName={this.props.menuName}/> <span className="remove" style={removeStyle} onClick={this.onRemoveItem.bind(this, i)}>x</span> </div> ) 我收到一个错误: dashboard_view.browserify.browserified.js:1216 Warning: Unknown prop `_grid` on <div> tag. Remove this prop from the element. For details, see <URL ommitted because SO complained about URL shorteners> in div (created by DashboardLayout)

2021-10-07 20:48:25    分类:技术分享    reactjs   react-grid-layout

React:react-router-dom的学习总结
文章目录 1.前言2.路由基础3.如何获取动态路由参数(三种方式)3.1 Params参数3.2 search参数与state参数组合 5. 路由重要属性属性 1.前言 使用了React、Vue等开发的应用都是SPA(单页面应用)。 什么是单页面应用呢? 特点: 整个应用只有一个完整的页面。店家页面中的链接不会刷新页面,只会做页面的局部更新。数据都需要通过ajax请求获取,并在前端异步展现。 单页面应用想要实现多页面应用类似切换内容效果,那就离不开路由。 React的路由是一个独立被分割出去的库,在使用路由前需使用下面命令在项目中引入该库: cnpm install react-router-dom --save 2.路由基础 咋们由浅入深,先来学习最基础的路由使用。 静态路由示例: index.js: import React from 'react' import ReactDOM from 'react-dom' import App from './App.js' ReactDOM.render(<App />, document.getElementById('root')) App.js: import React from 'react' import { BrowserRouter as Router, Route, Link } from 'react

2021-12-03 16:15:38    分类:博客    

setNativeProps 更改文本组件 React Native Direct Manipulation 的值(setNativeProps Change Value for Text Component React Native Direct Manipulation)
问题 由于性能原因,我想直接更新组件的值。 render(){ <View> <Text style={styles.welcome} ref={component => this._text = component}> Some Text </Text> <TouchableHighlight underlayColor='#88D4F5' style={styles.button}> <View> <Text style={styles.buttonText} onPress={this.useNativePropsToUpdate.bind(this)}> Iam the Child </Text> </View> </TouchableHighlight> </View> } 这是我用来更新文本组件的方法。 我不知道我是否设置了正确的属性/如何确定要设置的属性: useNativePropsToUpdate(){ this._text.setNativeProps({text: 'Updated using native props'}); } 基本上尝试遵循此示例中的相同方法:https://rnplay.org/plays/pOI9bA 编辑:当我尝试明确分配更新的值时: this._text.props.children = "updated"; (我知道这是在 RN

2021-12-21 15:06:07    分类:技术分享    react-native

react-native 从0开始 ( 基础知识 一 )
react-native 基础知识 1.Hello World2. Props(属性)2.1 绑定属性2.2 组件复用 3. State(状态) 1.Hello World 【 Hello World 】 延续悠久的历史传统,以 Hello word作为开篇 import React from 'react'; import { Text, View } from 'react-native'; const HelloWorldApp = () => { return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}> <Text>Hello, world!</Text> </View> ) } export default HelloWorldApp; 可以看到,在代码中使用了<View/>、 <Text/>,作用就是用来替代web的<div/>和<span/>标签 View常用作其他组件的容器,来帮助控制布局和样式。 2. Props(属性) 【 Props(属性)】 2.1 绑定属性 import React from 'react'; import { Image } from 'react-native'; const Bananas = () => { let pic

2021-04-12 13:52:50    分类:博客    

React基础知识(必看)
文章目录 React1. 是什么?2. 谁开发的?3. 为什么要学?4. React的特点安装安装命令执行命令 JSX语法JSX产生的原因JSX的概述使用步骤嵌入JS表达式条件渲染列表渲染样式处理**行内样式 -style**类名 -className React组件介绍函数创建组件类创建组件抽离成单独的JS文件 React事件处理事件绑定事件对象有状态组件和无状态组件State和SetStatestate基本使用setState() 修改状态 事件绑定this指向箭头函数利用bind方法class的实例方法 表单处理受控组件多表单元素优化非受控组件 React组件进阶组件的props组件通讯的三种方式父组件传递数据给子组件子组件传递数据给父组件兄弟组件传递 评论功能(组件)Context完整代码演示: props校验 生命周期创建时(挂载阶段)更新时卸载时 render-props模式children代替render属性改造代码元素显示与隐藏 高阶组件setState()说明setState() 的两个作用 组件性能优化减轻state避免不必要的重新渲染判断组件本身是否需要重新渲染子组件中判断是否渲染 虚拟DOM和Diff算法虚拟DOMDiff算法 React路由基础常用组件说明RouterLinkRoute 默认路由编程式导航匹配模式模糊匹配模式精准匹配 React 1

2022-03-09 02:23:13    分类:博客    

React 开发必须知道的 34 个技巧【近1W字】
React 是前端三大框架之一,在开发中也是一项技能; 本文从实际开发中总结了 React 开发的一些技巧技巧,适合 React 初学或者有一定项目经验的同学 序列文章:Vue 开发必须知道的 36 个技巧【近1W字】 源码地址 请戳, 欢迎 star 效果图 1 组件通讯 1.1 props 子组件 import React from “react”; import PropTypes from “prop-types”; import { Button } from “antd”; export default class EightteenChildOne extends React.Component { static propTypes = { //propTypes校验传入类型,详情在技巧11 name: PropTypes.string }; click = () => { // 通过触发方法子传父 this.props.eightteenChildOneToFather(“这是 props 改变父元素的值”); }; render() { return ( 这是通过 props 传入的值{this.props.name} 点击改变父元素值 ); } } 复制代码父组件 <EightteenChildOne name={‘props 传入的 name 值’}

2021-11-02 18:51:32    分类:博客    

React 16 类型“DetailedHTMLProps,HTMLDivElement>”上不存在属性(Property does not exist on type 'DetailedHTMLProps, HTMLDivElement>' with React 16)
问题 由于 React 16 现在允许自定义 DOM 属性,我尝试在我的 Typescript 代码中利用它: import * as React from 'react'; <div className="page" size="A4"> </div> 但收到此错误消息: 错误 TS2339:类型“DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>”上不存在属性“size”。 该线程建议进行module augmentation ,所以我尝试了这种方式: import * as React from 'react'; declare module 'react' { interface HTMLProps<T> { size?:string; } } 同样的错误信息。 最后,我还尝试将page声明为新的 HTML 标签: declare global { namespace JSX { interface IntrinsicElements { page: any } } } <page className="page" size="A4"> </page> 它摆脱了错误消息,但在编译的代码中完全忽略了size属性,我最终得到: <page className="page"> </page>

2021-10-18 21:02:21    分类:技术分享    reactjs   typescript

React 基础
React介绍 React是用于构建用户界面的JavaScript库。在React中all in js,一切使用的都是JavaScript。React只负责应用程序的视图层,在react中没有把构建用户界面和构建用户界面的逻辑进行区分,所以使用react可以轻松构建出强交互式的web应用程序,在react当中是使用组件的方式来构建用户界面的。 JSX 语法 在React中使用jsx语法描述用户界面,他是一种JavaScript语法扩展在React代码执行之前,Babel会将JSX语法转换为标准的JavaScript APIJSX 语法就是一种语法糖,让开发人员使用更加舒服的代码构建用户界面。 jsx语法规则 定义虚拟dom时不要写引号标签中混入js表达式时,要用{}样式的类名指定不能用class,要用className内联样式,要用style={{key:value}}的形式去写只有一个根标签标签必须闭合标签首字母 若小写字母开头,则将该标签转为html中的同名元素,如html中午该标签对应的同名元素,则报错若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。 组件 函数式组件 创建函数式组件将函数式组件渲染到页面上 注: 执行了ReactDOM.render(MyCompontent/>…之后发生了什么 react解析组件标签

2021-12-09 14:57:07    分类:博客    

React 基础
JSX 语法 React中 使用 JSX 语法描述用户界面,他是一种 JavaScript 语法扩展 在 React 代码执行之前,Babel 会将 JSX 语法转换为标准的 JavaScript API JSX 语法就是一种语法糖,让开发使用更舒适的代码构建用户界面 属性 如果属性值为字符串类型,需要加引号,属性名称推荐采用驼峰式命名法 const ele = <div gretting="hello"></div> 如果属性值为 JavaScript 表达式,属性值外面加大括号 const ele = <img src={user.avatarUrl}></img> // 注意大括号外面不能加引号,JSX 会将引号中的内容识别为字符串,而不是表达式 JSX 单标记必须闭合 如果是JSX 单标记,必须闭合,否则报错 <img src={user.avatarUrl} /> className 为 JSX 添加类名,需要使用 className,而不是 class <button className="rounded" /> JSX 自动展开数组 const arr = [<p>哈哈</p>, <p>哈哈</p>, <p>哈哈</p>] const ele = <div>{arr}</div> // 解析后 /* <div> <p>哈哈</p> <p>哈哈</p> <p>哈哈</p

2021-12-30 15:54:50    分类:博客    

How to change cursor style to pointer on hovering over points of the chart?
问题 我正在使用 chart.js v.2。 库,当用户将鼠标悬停在图表点上时,我试图将光标样式更改为“指针”。 (我将把它与条形图、饼图、折线图一起使用)。 在charts.js v.2 中似乎应该支持这个选项。 但我在任何地方都找不到一个例子。 编辑:我没有提到我正在使用带有反应的图表,更具体地说,我正在使用这个反应包装器。 我正在导入例如图表 Line import { Line } from 'react-chartjs-2'; class ChartTimelineChart extends Component { constructor(props){ super(props); this.options = { responsive: true, maintainAspectRatio: false, animation: { easing: 'easeOutCirc', duration: 1000 }, pointStyle : 'circle', scales: { xAxes: [{ display: true, gridLines: {display: false}, scaleLabel: {display: true} }], yAxes: [{ display: true, gridLines: {display: false}, ticks:

2022-04-28 23:11:13    分类:技术分享    javascript   chart.js

React 高阶指引: Context 上下文 & 组件组合 & Render Props
React 高阶指引: Context 上下文 & 组件组合 & Render Props 文章目录 React 高阶指引: Context 上下文 & 组件组合 & Render Props前言正文1. Context 上下文1.1 使用动机 & 场景1.2 基本用法:Provider + Consumer1.2.1 定义全局数据对象1.2.2 React.createContext 创建上下文对象 ThemeContext1.2.3 使用 ThemeContext.Provider 定义上下文1.2.4 使用 ThemeContext.Consumer 获取全局数据1.2.5 任意组件都能作为消费者 1.3 使用 contextType 简化类组件1.4 多个 Context 上下文1.4.1 新的上下文对象 UserContext1.4.2 嵌套使用 Provider1.4.3 使用不同的 Consumer 接受数据 1.5 将状态转换函数也透过 Context 传递1.6 Context 小结:为什么少用 Context?1.6.1 使用规范(推荐) 2. 组件组合(Component Composition)2.1 什么叫组件组合?2.2 组件组合第一式:渲染子节点数组2.3 组件组合第二式:插槽(slot)2.4 组件组合第三式:特殊实例2.5 组件组合第四式

2022-03-10 03:48:39    分类:博客    

在React-native中使用SVG详细过程
首先React-native不能直接引入SVG图片,所以我们要借助两个库来实现,废话不多说,下面直接给出详细过程 1 . 安装react-native-svg(参考我的package.json文件) 2.下载你喜欢的SVG图片,可在阿里图标库慢慢挑选,然后放在一个文件夹里面,加粗的目的是因为后面要用这个文件夹的名字,一般用svgs吧 3.将svg处理成一个js文件,因为稍后要用到的react-native-svg-uri这个库虽然可以直接使用文件路径的方式引入,但是在安卓下有bug,具体自行百度,这个js文件也可以百度获得,使用node处理的,会将svg图片处理成key:value的键值对,比较简单,具体代码如下,这里取名叫做getSvg.js(看你喜欢取什么取什么) //导入node的文件模块 var fs = require('fs'); var path = require('path'); //定义想要处理的svg文件夹路径 const svgDir = path.resolve(__dirname, './svgs'); // 读取单个文件 function readfile(filename) { return new Promise((resolve, reject) => { fs.readFile(path.join(svgDir, filename),

2021-04-24 05:36:59    分类:博客    

React 入门: 核心特性全面解析
React 入门: 核心特性全面解析 文章目录 React 入门: 核心特性全面解析前言正文0. 项目搭建1. JSX1.1 揭露 JSX 的神秘面纱1.2 扩展 JS(强化版的 html)1.3 ReactDOM 渲染模版 2. 组件基础2.1 类组件(Class Component) vs 函数组件(Function Component) 3. Props 属性/数据传递(父组件传递给子组件的属性/参数)3.1 构造函数参数 props3.2 渲染多个元素(React.Fragment 的使用)3.3 属性保留字 4. State 组件状态4.1 初始化状态4.2 改变状态 5. 事件处理5.1 绑定函数5.2 文本开关 6. 表单使用6.1 通用用户输入处理函数6.2 select 选择框6.3 file 文件上传 & ref 引用6.4 ref 特性 结语其他资源参考连接完整代码示例 前言 在此之前主要都是学习 Vue 同时也是使用 Vue 来进行项目开发,近期打算开始好好学一学社区更加丰富,也更多被大公司采用的 React。作为一个在前端开发中比 Vue 耕耘更久的 MVVM 框架,React 的各种特性、用法可以说是也比 Vue 要在完善许多。当然最近 Vue3 的崛起也使得 Vue 框架更加成熟可用。 之后应该会开启一系列的 React 特性解说和使用记录的博客

2022-02-16 16:38:36    分类:博客    

React 目标 了解组件以及组件的封装
React 目标 了解组件以及组件的封装 组件通信 children defaultProps React React.js 是一个帮助你构建页面 UI 的库。React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。 一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的,这时候组件的显示形态就会发生相应的改变。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。 React.js 不是一个框架,它只是一个库。它只提供 UI (view)层面的解决方案。在实际的项目当中,它并不能解决我们所有的问题,需要结合其它的库,例如 Redux、React-router 等来协助提供完整的解决方法。 模块化:从 代码 的角度,去分析问题,把我们编程时候的业务逻辑,分割到不同的模块中来进行开发,这样能够方便代码的重用; 组件化:从 UI 的角度,去分析问题,把一个页面,拆分为一些互不相干的小组件,随着我们项目的开发,我们手里的组件会越来越多,最后,我们如果要实现一个页面,可能直接把现有的组件拿过来进行拼接,就能快速得到一个完整的页面, 这样方便了UI元素的重用;组件是元素的集合体。 vue 组件化与 React组件化 1、Vue是如何实现组件化的:.vue 组件模板文件

2021-04-22 05:50:15    分类:博客    

React Native:如何在不使用 NavigatorIOS 组件的情况下切换页面?(React Native: How to switch page without using NavigatorIOS component?)
问题 我是 react js 和 react native 的新手,我想知道如何在不依赖 navigatorIOS 或 navigator 组件的情况下从一个页面(组件)导航到另一个页面(组件)? 在 Hybrid 开发模式下,这很简单,只需添加带有 href 属性的 html 元素 A 就可以了,但在 React Native 中,不使用 NavigatorIOS 怎么办? 回答1 一种方法是创建一个函数来呈现您希望在单击时显示的组件,基本上复制了 href 的功能: changeComponent: function(component) { this.setState({ componentSelected: component }) }, renderComponent: function(component) { if(component == 'One') { return <ComponentOne changeComponent={this.changeComponent} /> } else if(component == 'Two') { return <ComponentTwo changeComponent={this.changeComponent} /> } else if(component == 'Three') { return

2022-01-16 19:14:15    分类:技术分享    javascript   reactjs   react-native

React-Style、Webpack、React - 未捕获的错误:不变违规:`style` 道具(React-Style, Webpack, React - Uncaught Error: Invariant Violation: The `style` prop)
问题 我在浏览器中收到以下错误: 未捕获的错误:不变违规: style道具需要从样式属性到值的映射,而不是字符串。 例如,使用 JSX 时,style={{marginRight: spatial + 'em'}}。 这是在运行 webpack-dev-server 并转到 localhost:8080 时。 ./modules/main.js: /** @jsx React.DOM */ var React = require('react'); var HoverAction = require('./HoverAction/HoverAction'); var Application = React.createClass({ render: function() { return ( <div> <HoverAction title="favorite" /> </div> ); } }); if (typeof window !== 'undefined') { React.render(<Application />, document.getElementById('app')); } ./modules/HoverAction/HoverActions.js: /** @jsx React.DOM */ 'use strict'; var StyleSheet =

2021-11-29 17:45:55    分类:技术分享    reactjs   webpack   webpack-dev-server

地图找房(七)01——动画控制-three.js-d3-echarts & react-spring动画组件的基本使用
动画控制——three.js-d3-echarts & react-spring动画组件的基本使用 关于动画 基于JavaScript的动画基于css的动画数据可视化:数据报表 canvas 画布 (flash)svgwebgl(three.js/d3/echarts) react-spring react-spring-github Spring组件介绍 作用:实现动画效果,能从状态A 变到 状态B.from 属性是可选的,仅在组件第一次被渲染的时候生效。to 属性用来更新 spring ,也就是实现新的动画效果。组件第一次渲染: from --> to以后的每一次: 旧to —> 新to ( 一般就是通过 React 组件的状态来动态设置 ) <Spring from={{opacity: 0}} to={{opacity: 1}} {props => <div style={props}>动画内容</div>} </Spring> Spring组件基本使用 基于Hooks API Render-props API (推荐使用) 先安装,再导入 yarn add react-spring import {Spring} from 'react-spring/renderprops' 基于Render-props案例-类似于渐变色

2022-03-09 04:21:17    分类:博客    

如何从React中的事件对象访问自定义属性?(How to access custom attributes from event object in React?)
问题 如http://facebook.github.io/react/docs/jsx-gotchas.html所述,React能够呈现自定义属性: 如果要使用自定义属性,则应在其前面加上data-。 <div data-custom-attribute="foo" /> 那是个好消息,除了我找不到从事件对象访问它的方法,例如: render: function() { ... <a data-tag={i} style={showStyle} onClick={this.removeTag}></a> ... removeTag: function(event) { this.setState({inputVal: event.target????}); }, element和data-属性以html格式呈现。 可以使用event.target.style fine来访问style类的标准属性。 我尝试使用event.target代替: event.target.props.data.tag event.target.props.data["tag"] event.target.props["data-tag"] event.target.data.tag event.target.data["tag"] event.target["data-tag"] 这些都不起作用。

2021-04-07 10:27:23    分类:技术分享    javascript   facebook   reactjs

有没有办法在 React Native 中全局设置字体?(Is there a way to set a font globally in React Native?)
问题 我需要创建一个适用于整个应用程序中每个Text组件的自定义字体。 有没有办法在 React Native 中全局设置字体? 回答1 一种方法是为 RN Text创建一个包装器,比如 MyTextCustomFont: const MyTextCustomFont = (props) => { return ( <Text style={{fontFamily:'myFont'}} {...props} >{props.children}</Text> ) } 导入此MyTextCustomFont并在任何地方使用。 另一种方法是定义一个样式对象并在您想要的任何地方使用它。 回答2 为此,我们必须实现一个方法,在该方法中我们将覆盖 React Native 中的Text组件创建。 在这里,我们将设置默认字体系列或大小或我们想要默认设置的任何属性。 // typography.js import React from 'react' import { Text, Platform, StyleSheet } from 'react-native' export const typography = () => { const oldTextRender = Text.render Text.render = function(...args) { const origin =

2021-10-23 10:17:57    分类:技术分享    react-native   hybrid-mobile-app

React基础用法
React基础 脚手架安装 npm i -g create-react-app //全局安装 安装完成以后,在控制台输入如下命令,验证是否安装成功 create-react-app --version 脚手架创建项目 create-react-app 项目名称 脚手架项目结果 1.public是公开文件夹 2.src目录是开发目录 index.js是整个程序的启动目录,也是webpack的入口文件index.css是程序程序的公共CSS文件,如果需要写公共CSS文件最好写在这里App.js是根组件,在React里面,这就是一个根组件,React的组件是以JS文件的形式存在App.css是App.js组件的样式,一般情况下,一个JS文件会对应一个CSS文件serviceWorker.js是在开发React的时候启动的http服务器 分析React脚手架项目的启动 index.js文件 import React from 'react'; //导入React,一定要导,即使你没有用 import ReactDOM from 'react-dom'; //因为主要是操作DOM,所以这个是React操作DOM的 import './index.css'; //导入样式文件 import App from './App'; //导入App.js,它是一个组件 import * as

2021-11-26 20:52:49    分类:博客    

React的ts类型检查与注意点
大纲 React的ts类型检查与注意点配置*jsx项的选项 常用检查函数组件的类型检查使用FC(Function Component)类型来声明函数组件定义 Props 类型Children默认 props 声明Dispatch接口泛型函数组件子组件声明Forwarding Refs 类组件的类型检查继承 `Component React的ts类型检查与注意点 用TypeScript写React的时候,我们可以通过@types/...使用一些类型检查,本文记录这些检查方式的注意点。 配置 首先进行编译配置。配置很简单,先安装@types/react包(npm i -D @types/react),然后在tsconfig.json的编译配置项compilerOptions中配置"jsx"项为"react"即可。 *jsx项的选项 "preserve":模式下对代码的编译会保留 jsx 格式,并输出一份 .jsx 后缀的文件;"react":模式下对代码的编译是直接转换成 React.createElement,并输出一份 .js 后缀的文件;"react-native":模式下对代码的编译会保留 jsx 格式,并输出一份 .js 后缀的文件。 ModeInputOutputOutput File Extensionpreserve<div /><div />.jsxreact<div

2021-11-25 03:17:07    分类:博客    

如何设置反应组件的 iframe 内容(How to set iframe content of a react component)
问题 我正在尝试在 React 组件中设置 iframe 的内容,但我无法做到。 我有一个包含在 iframe 完成加载时必须调用的函数的组件。 在该函数中,我正在设置内容,但似乎根本没有调用 onload 函数。 我正在 Chrome 浏览器中测试它。 我正在尝试以下操作: var MyIframe = React.createClass({ componentDidMount : function(){ var iframe = this.refs.iframe.getDOMNode(); if(iframe.attachEvent){ iframe.attacheEvent("onload", this.props.onLoad); }else{ iframe.onload = this.props.onLoad; } }, render: function(){ return <iframe ref="iframe" {...this.props}/>; } }); var Display = React.createClass({ getInitialState : function(){ return { oasData : "" }; }, iframeOnLoad : function(){ var iframe = this.refs.bannerIframe

2021-06-23 10:50:20    分类:技术分享    javascript   iframe   reactjs   xmlhttprequest

React Redux-Form using child components with child components that have multiple submits
New to React-Redux. I have a child component that uses the following with "handleSubmit" and this part of the code works. <span style={textLinkStyle} onClick={handleSubmit(values => props.onSubmit({ ...values, sortBy: 'ClientNumber' } ))}> <span>Client # </span> </span> Here is the above code's child component with all the relevant parts. export const TableHeaders = (props) => { const { handleSubmit } = props const { sortBy, sortDirection } = props return ( <div> <div className="row"> <div className="col-md-2" style={headingCellStyle}> <span style={textLinkStyle} onClick={handleSubmit(values =

2021-11-09 03:42:10    分类:问答    javascript   reactjs   redux-form

如果以这种方式创建 React Element,如何向它添加样式?(How to add style to React Element if it's created this way?)
问题 var MyElement = React.createClass({displayName: "FormatParagraph", render: function () { return ( React.createElement("p", null, this.props.paragraph) ); } }); 如何为此添加样式对象? 回答1 createElement的第二个参数是属性的散列,其中键是属性名称,值是属性值。 style属性将样式名称的哈希值转换为值。 因此,例如: React.createElement("p", {style: {color: "red", backgroundColor: "blue"}}, this.props.paragraph) 回答2 React.createElement("p", {id : 'div1', className : 'news'}, this.props.paragraph) 通过这种方式,您可以在id/class使用App.css中指定的 CSS。

2021-06-01 14:13:36    分类:技术分享    reactjs

如何从React访问样式?(How to Access styles from React?)
问题 我正在尝试在React中访问div的宽度和高度样式,但是我一直遇到一个问题。 这是我到目前为止所得到的: componentDidMount() { console.log(this.refs.container.style); } render() { return ( <div ref={"container"} className={"container"}></div> //set reff ); } 这可以工作,但是我得到的输出是CSSStyleDeclaration对象,并且在all属性中,我可以为该对象提供所有CSS选择器,但是没有设置它们。 它们都设置为空字符串。 这是CSSStyleDecleration的输出是:http://pastebin.com/wXRPxz5p 非常感谢您对查看实际样式(事件继承的样式)的任何帮助! 谢谢! 回答1 对于React v <= 15 console.log( ReactDOM.findDOMNode(this.refs.container).style); //React v > 0.14 console.log( React.findDOMNode(this.refs.container).style);//React v <= 0.13.3 编辑: 获取特定的样式值 console.log(window

2021-05-09 00:09:42    分类:技术分享    javascript   css   reactjs   attributes

vue粗略(笔记)
引用 script src=‘路径’M 模型 等同于数据V 视图 等同于htmlcss 用户可见的VM 视图模型 链接V与M之间的桥梁 传递两者之间的数据Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 指令 v-model:双向数据绑定 视图改变模型也发生改变 模型改变视图也发生改变 <input type="text" v-model="text"> {{text}} </div> <script> new Vue({ data: { text: '你个小垃圾' }, el: '.box' }) </script> v-show 控制元素显示或隐藏 true显示 false隐藏 显示display:none/block; <div class="box"> <input type="checkbox" v-model="text"> <h3 v-show="text">小得瑟</h3> {{text}} </div> <script> new Vue({ data: { text: false }, el

2021-11-26 19:26:41    分类:博客    

反应内联样式的css伪代码“li::before”(css pseudo code "li::before" in react inline style)
问题 我有一个名为“ExplanationLists”的 React 组件,我想使用 css 伪代码li::after将动态内联样式添加到li html 元素中,这样我就可以更好地用图形设置项目符号点的样式。 例如, li::before { content: dynamic_content; } 但是,我无法真正做到这一点。 任何建议将不胜感激。 下面是我写的代码。 class ExplanationLists extends Component{ populateHtml(){ // asign lists data into variable "items" var items = this.props.items; // loop though items and pass dynamic style into li element const html = items.map(function(item){ var divStyle = { display: "list-item", listStyleImage: 'url(' + '/images/icons/batchfield_fotograf_rosenheim_icon_' + item.icon + '.png' + ')' }; // html templating return ( <li style=

2022-01-14 22:49:18    分类:技术分享    reactjs   inline-styles

如何有条件地向React组件添加属性?(How do I conditionally add attributes to React components?)
问题 如果满足特定条件,是否有办法仅将属性添加到R​​eact组件? 我应该在渲染后基于Ajax调用将required和readOnly属性添加到表单元素中,但是由于readOnly =“ false”与完全省略该属性不同,因此我看不到如何解决此问题。 下面的示例应该解释我想要的内容,但是它不起作用(解析错误:意外的标识符)。 var React = require('React'); var MyOwnInput = React.createClass({ render: function () { return ( <div> <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/> </div> ); } }); module.exports = React.createClass({ getInitialState: function () { return { isRequired: false } }, componentDidMount: function () { this.setState({ isRequired: true }); }, render: function () { var isRequired = this

2021-03-29 18:52:08    分类:技术分享    javascript   reactjs

In react JS fields losing focus after first onChange
I am using redux-form But When I am start typing focus goes out first time in react. In my component below, the input field loses focus after typing a character. While using Chrome's Inspector, it looks like the whole form is being re-rendered instead of just the value attribute of the input field when typing. Please see below code: <Field name='description' // onChange={this.handleChange.bind(this)} //value={this.state.description} component={props => { return ( <MentionTextArea {...props} userTags={userTags} tags={postTags}/> ) }} MentionTextArea Component: import React, {Component

2021-05-06 15:06:37    分类:问答    reactjs   redux   react-redux   redux-form

react 自学01
1,关于虚拟DOM: 1,本质是Object类型的对象(一般对象).2,虚拟DOM比较"轻",真实DOM比较"重",因为虚拟DOM是React内不再使用,无需真实DOM上那么多的属性.3,虚拟DOM最终会被React转化为真实DOM,呈现在页面上. 2.渲染虚拟DOM到页面上 注意jsx语法 1.定义虚拟DOM时,不要写字符串2.标签中混入js表达式要用{}.3.样式的类名指定不用class要用className,4.内联样式要用style={{key:value}},5.只有一个根标签.6.标签必须必和7.标签首字母 (1)若小写字母开头则将改标签转为html中同名标签.若html中无改标签对应的同名元素,则报错.(2)若大写字母开头.react就去渲染对应的组件,若组件没有定义,则报错. 3.函数式组件和类式组件 1.函数是组建就是一个function function MyComponent () { console.log(this) //此处的this是undefined 因为babel编译后开启了严格模式 return <h2> 我使用函数定义的组件(适用于[简单组件]的定义)</h2> } ReactDOM.render(<MyComponent />,document.getElementById('test')) /* 执行了ReactDOM.render(

2021-04-16 08:58:59    分类:博客    

React.js-重新呈现时输入失去焦点(React.js - input losing focus when rerendering)
问题 我只是写文本输入,在onChange事件中我调用setState ,所以React重新渲染了我的UI。 问题是文本输入始终会失去焦点,因此我需要再次针对每个字母:D。 var EditorContainer = React.createClass({ componentDidMount: function () { $(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size: '8px'}); }, componentDidUpdate: function () { console.log("zde"); $(this.getDOMNode()).slimScroll({destroy: true}).slimScroll({height: 'auto', distance: '4px', size: '8px'}); }, changeSelectedComponentName: function (e) { //this.props.editor.selectedComponent.name = $(e.target).val(); this.props.editor.forceUpdate(); }, render: function () { var style =

2021-04-30 18:09:56    分类:技术分享    javascript   reactjs

react-native初学者必看(小项目见大智慧)
菜鸟在暑期,选择了干前台,一开始,真的是一脸懵逼,完全不知道是什么,现在也是学得思维混乱,于是,我就想,我一定要一个一个查,让后面的人少走弯路 文章目录 菜鸟在暑期,选择了干前台,一开始,真的是一脸懵逼,完全不知道是什么,现在也是学得思维混乱,于是,我就想,我一定要一个一个查,让后面的人少走弯路在讲之前还是得说一下export 第一句:小总结 第二句第三句state书写规范(小结)style的两种写法组件属性click里面的m在别的地方怎么定义ImageBackground无效是为什么onPressonChangeTextTextInput 的 onChangeText 回调的两种写法 接下来直接看菜鸟写的小例子: import React, { Component } from "react"; import { View, Text, TextInput, StyleSheet, ImageBackground, TouchableOpacity } from "react-native"; //如果里面有没有调用的,那么其是灰色,并不是报错 // const m = new Map(); // m.set("pbw", "111"); // m.set("wcz", "123"); // m.set("zb", "222"); export default class

2021-11-01 06:53:07    分类:博客    

如何将字符串转换为jsx?(How do I convert a string to jsx?)
问题 我将如何将字符串转换为jsx ? 例如,如果我从textarea引入一个字符串,如何将其转换为React元素; var jsxString = document.getElementById('textarea').value; 我要在客户端上进行转换的过程是什么? 是否可以? 回答1 您可以考虑dangerouslySetInnerHTML使用React属性dangerouslySetInnerHTML : class YourComponent{ render() { someHtml = '<div><strong>blablabla<strong><p>another blbla</p/></div>' return ( <div className="Container" dangerouslySetInnerHTML={{__html: someHtml}}></div> ) } } 回答2 就个人而言,我喜欢这样做,就像在前面的建议(建议在JSX中使用dangerouslySetInnerHTML地设置InnerHTML属性)中一样。 只是作为一种替代方案,如今有一个名为react-html-parser的库。 您可以检查它并通过以下URL从NPM注册表中安装:https://www.npmjs.com/package/react-html-parser。

2021-04-14 12:13:20    分类:技术分享    reactjs   react-jsx

如何使用 Jest + Enzyme 测试 React 组件的样式?(How can I test React component's style with Jest + Enzyme?)
问题 好吧,我有一个名为<TestButton />的组件。 在<TestButton />有两个 Semantic UI React 组件, <Button />和<Header> 。 基本上,当<Button>被点击时,它会切换display: none; 到<Header> 。 我想检查(我想学习)如何断言<Header>的display: none; 当<Button>被点击时。 测试按钮.js const TestButton = (props) => { return ( <div id='test-button'> <Header id='please-hide-me' size='huge'>Please Hide Me</Header> <Button onClick={ () => { hiding = !hiding; let findDOM = document.getElementById(searchForThisID); if (findDOM) { findDOM.style.display = hiding ? 'none' : ''; } return hiding; } } > Sample Toggle </Button> </div> ); }; 我的单元测试基于如何使用酶测试 React 组件属性的样式。 它看起来像这样: test(`

2021-10-21 00:17:24    分类:技术分享    javascript   reactjs   enzyme   jestjs   semantic-ui-react

使用TypeScript在React组件中的默认属性值(Default property value in React component using TypeScript)
问题 我不知道如何使用Typescript为我的组件设置默认属性值。 这是源代码: class PageState { } export class PageProps { foo: string = "bar"; } export class PageComponent extends React.Component<PageProps, PageState> { public render(): JSX.Element { return ( <span>Hello, world</span> ); } } 当我尝试使用这样的组件时: ReactDOM.render(<PageComponent />, document.getElementById("page")); 我收到一个错误消息,说缺少属性foo 。 我想使用默认值。 我也尝试在组件内部使用static defaultProps = ... ,但是我怀疑它没有任何效果。 src/typescript/main.tsx(8,17): error TS2324: Property 'foo' is missing in type 'IntrinsicAttributes & IntrinsicClassAttributes<PageComponent> & PageProps & { children?: ReactEle

2021-04-14 17:04:47    分类:技术分享    reactjs   typescript   tsx

自学react
react 核心概念 虚拟dom(virtual document object model) 本质:浏览器中的概念,用js对象来表示页面上的元素,并提供了操作DOM对象的API什么是DOM和虚拟DOM:框架中的概念,用js对象来模拟页面上的DOM和DOM嵌套实现目的:为了实现页面中,DOM元素的高效更新跟dom的区别: dom:浏览器中提供的概念,用js对象表现页面上的元素,并提供了操作元素的api虚拟dom:是框架中的概念,是程序员,手动用js对象来模拟dom元素和嵌套关系的 本质:用js对象来模拟dom元素和嵌套关系目的:就是为了实现页面元素的高效更新 Diff算法 tree diff :新旧两颗dom树,逐层对比的过程。当整颗dom逐层对比完毕,则所有需要被按需更新的元素,必然能被找到component diff:在进行tree diff的时候,每一层,组件级别的对比。 如果对比前后组件的类型相同,则暂时认为此组件不需要被更新如果对比前后组件的类型不同,则需要移除旧组件,创建新组件并添加到页面元素上 element diff:在进行组件对比的时候,如果两个组件类型相同免责需要进行元素级别的对比。 创建webpack 快速初始化项目 npm init -y 创建文件夹src存放源代码也叫源代码目录,dist存放打包之后的内容也叫产品目录 在src目录下创建index.html

2021-11-14 02:11:02    分类:博客    

react hook 造轮子
GitHub地址:https://github.com/rayhomie/rayhomieUI 一、sass的使用 1、@import方式引入scss文件,后面必须带后缀名scss @import "main.scss"; 2、Partials方式引入base.scss文件,文件必须以(下划线)开头,可以不用带后缀名 @import "_base"; sass @import和css @import命令的区别: CSS @import 指令在每次调用时,都会创建一个额外的 HTTP 请求。但,Sass @import 指令将文件包含在 CSS 中,不需要额外的 HTTP 请求。 Sass Partials:如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件,你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。(partials只能当做模块导入,不能当做css文件来编译使用。) 例如:以下实例创建一个 _colors.scss 的文件,但是不会编译成 _colors.css 文件: _colors.scss 文件代码: $myPink: #EE82EE; $myBlue: #4169E1; $myGreen: #8FBC8F; 如果要导入该文件,则不需要使用下划线: 实例: @import "colors"; body { font

2021-11-25 11:55:17    分类:博客    

react-native基础知识以及从零搭建
React native基础 React native介绍 使用JavaScript和React编写原生移动应用 React Native应用是真正的移动应用,React Native产出的并不是“网页应用”, 或者说“HTML5应用”,又或者“混合应用”。 最终产品是一个真正的移动应用,从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。 英文官网:https://reactnative.dev/ 中文:https://reactnative.cn/ https://react-native.org.cn/ 环境准备 搭建项目框架 expo介绍 http://expo.io 模拟测试环境,增强rn开发的能力,提供组件 使用 Expo CLI 假设已安装 Node.js 10 LTS或更高版本,则可以使用npm安装Expo CLI命令行实用程序: npm install -g expo-cli 或者 yarn global add expo-cli 然后运行以下命令,创建一个名为“rn-basics”本地项目: expo init rn-basics cd rn-basics npm start #

2021-11-22 20:05:26    分类:博客    

React Native 加载动画
第一步:屏蔽react-navigation默认的过渡动画 在创建createStackNavigator的时候,我们可以设置其相应的属性值,其中有一个transitionConfig的属性。官方解释为它是一个用于返回屏幕过渡对象的函数,该对象中也包含了其他的属性,如下: /** * Describes a visual transition from one screen to another. */ declare export type TransitionConfig = { // The basics properties of the animation, such as duration and easing transitionSpec?: NavigationTransitionSpec, // How to animate position and opacity of the screen // based on the value generated by the transitionSpec screenInterpolator?: (props: NavigationSceneRendererProps) => {}, // How to animate position and opacity of the header componetns //

2021-11-02 04:16:31    分类:博客    

我似乎无法使用 componentWillUnmount 可靠地删除侦听器(I can’t seem to reliably remove a listener using componentWillUnmount)
问题 我在窗口中添加了一个侦听器来检测onClickOutside类型的场景(特别是在菜单外部单击时折叠菜单)。 这是具有相关代码的组件: import React, { Component, PropTypes } from 'react'; import ReactDOM from 'react-dom'; import LinkedStateMixin from 'react-addons-linked-state-mixin'; import styles from './DescriptiveSelect.css'; import classNames from 'classnames'; import _ from 'underscore'; export default class DescriptiveSelect extends Component { static propTypes = { attrForOptionLabel: PropTypes.string, attrForOptionValue: PropTypes.string, children: PropTypes.string, className: PropTypes.string, disabled: PropTypes.bool, nullLabel: PropTypes.string

2021-09-29 19:25:42    分类:技术分享    javascript   reactjs