Javascript React inline style - style prop 需要从样式属性到值的映射，而不是字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43366026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React inline style - style prop expects a mapping from style properties to values, not a string
提问by George Welder
I am trying to set inline styles in my React application. In this case, for a span:
我正在尝试在我的 React 应用程序中设置内联样式。在这种情况下，对于跨度：
<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>
React tells me:
反应告诉我：
Uncaught Invariant Violation: The
styleprop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by `SentenceView
Uncaught Invariant Violation：
styleprop 需要从样式属性到值的映射，而不是字符串。例如，使用 JSX 时，style={{marginRight:spacing + 'em'}}。这个 DOM 节点是由 `SentenceView 渲染的
I am not quite sure what it means.
我不太确定这意味着什么。
PS: I have tried different versions, so I did paddingRight: 5as well as paddingRight: 5 + 'px'as well as paddingRight : 5px, but I didn't have any success!
PS：我尝试了不同的版本，所以我做得paddingRight: 5和paddingRight: 5 + 'px'一样好paddingRight : 5px，但我没有成功！
采纳答案by dattebayo
Use "styles" prop instead of style
使用“ style s”道具代替样式
<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>
回答by xgqfrms
There some ways to set style for React Components.
有一些方法可以为 React 组件设置样式。
https://facebook.github.io/react/docs/context.html
https://facebook.github.io/react/docs/context.html
https://github.com/facebookincubator/create-react-app
https://github.com/facebookincubator/create-react-app
using
className="your-class-name"using
style={css_object}orstyle={{color: this.props.color}}
使用
className="your-class-name"使用
style={css_object}或style={{color: this.props.color}}
React REPL
反应REPL
1 className & stylesheet.css
1 个班级名称 & stylesheet.css
import './styles.css';
/*
.classname-color{
color: "red";
background: "#0f0";
}
*/
const BTN = (props) => {
return (
<div>
My name is <button>{props.name}</button>
<hr/>
I'm <span className="classname-color">{props.age}</span> yeas old!
</div>
);
};
const infos = {
name: "xgqfrms",
age: 23
};
ReactDOM.render(<BTN {...infos} />, mountNode);.classname-color{
color: "red";
background: "#0f0";
}2 style Object
2 样式对象
// <span style={styles}>
const styles = {
color: "red",
background: "#0f0",
fontSize: "32px"
};
const BTN = (props) => {
return (
<div>
My name is <button>{props.name}</button>
<hr/>
I'm <span style={styles}>{props.age}</span> yeas old!
</div>
);
};
const infos = {
name: "xgqfrms",
age: 23
};
ReactDOM.render(<BTN {...infos} />, mountNode);
// <span style={{color: styles.color}}>
const styles = {
color: "red",
background: "#0f0",
fontSize: "32px"
};
const BTN = (props) => {
return (
<div>
My name is <button>{props.name}</button>
<hr/>
I'm <span style={{color: styles.color}}>{props.age}</span> yeas old!
</div>
);
};
const infos = {
name: "xgqfrms",
age: 23
};
ReactDOM.render(<BTN {...infos} />, mountNode);回答by zappee
This is the way how you can define and use inline style with react.
这就是如何定义和使用带有反应的内联样式的方式。
/**
* Style definitions.
*/
const STYLE = {
infoColor: {
color: 'green'
},
warningColor: {
color: 'orange'
},
errorColor: {
color: 'red'
}
};
/**
* Component
*/
class Welcome extends React.Component {
/**
* Rendering into the DOM.
*/
render() {
return (
<div>
<h2 style={STYLE.infoColor}>Welcome!</h2>
)
}
}
回答by kanishk verma
JSX AND HTML are different:
JSX 和 HTML 是不同的：
In HTML it is
在 HTML 中它是
<div style="background-color: red;"></div>
In JSX you write
在 JSX 中你写
<div style={{ backgroundColor: 'red' }}></div>
Conditional inline formatting are different in both.
两者的条件内联格式都不同。
回答by zaib
don't wrap the {{}} in double quotes or string
不要用双引号或字符串包裹 {{}}
