天道酬勤,学无止境

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 class ProgressBar extends Component {
  constructor(props) {
    super(props)
    let progress = +props.progress.replace(/[^0-9]/g, '') || 50
    this.state = {
      style: {
        width: progress + '%'
      }
    }
  }

  render() {
    return (
    ...
      <div className="progress-bar" role="progressbar" aria-valuenow={ this.state.progress } style={ this.state.style }></div>
    ...
    )
  }
}
ProgressBar.propTypes = {
  progress: PropTypes.string.isRequired
}
标签

评论

Most likely this.props.progess is not set to an appropriate value. Provide a good default for this case:

render() {

  const { progress = 0 } = this.props;

  return (
    <div style={{ width: progress + '%' }}></div>
  )
}

Your example works as you expected.

class Example extends React.Component {
  render(){
    const style = {
        width: this.props.progress + '%',
        backgroundColor : 'red'
    }
    return  <div style={style}>
        Hello
    </div>
  }
}
React.render(<Example progress={10}/>, document.getElementById('container'));

Fiddle. Just make sure that you dont forget to set progress prop with coresponding value

Update 2021 (Functional Component)

const Example = (props) {
    const style = {
        width: props.progress + '%',
        backgroundColor : 'red'
    }
    
    return (
        <div style={style}>Hello</div>
    );
  
}
React.render(<Example progress={10}/>, document.getElementById('container'));

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 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
  • 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
  • 警告:收到非布尔属性的“假”。 如何为自定义布尔属性传递布尔值?(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()}.
  • React 美丽的 DnD 拖出位置问题(React beautiful DnD drag out of position problem)
    问题
  • 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>
  • 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 (
  • 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语法是它的语法糖,也就是对他的封装。 #
  • 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 }
  • 在自定义 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 值的一部分,你需要在子组件的某个地方使用这些数据。
  • 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 } =
  • 将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=
  • 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 项目名称 安装需要等待一段时间,这个过程实际上会安装三个东西
  • 如何有条件地添加属性以响应 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:/
  • 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'
  • 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:
  • 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
  • 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
  • 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 =
  • 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 /> 。 我的问题是:
  • 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)