我知道你可以在React类中指定样式,像这样:

const MyDiv = React.createClass({
  render: function() {
    const style = {
      color: 'white',
      fontSize: 200
    };
    
    return <div style={style}> Have a good and productive day! </div>;
  }
});

我应该瞄准这样做的所有样式,并没有在我的CSS文件中指定的样式吗?

或者我应该完全避免内联样式?

这似乎有点奇怪和混乱做一点两者-两个地方需要检查时调整样式。


当前回答

对于某些组件,使用内联样式更容易。此外,我发现它更容易和更简洁(因为我使用Javascript而不是CSS)动画组件样式。

对于独立组件,我使用“扩展操作符”或“…”。对我来说,它清晰、美丽,在狭小的空间里也能工作。下面是我制作的一个加载动画来展示它的好处:

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

2019年11月

在这个行业(一家财富500强公司)工作,我不允许做任何内联样式。在我们的团队中,我们认为内联样式是不可读和不可维护的。而且,在亲眼看到内联样式如何使支持应用程序变得完全无法忍受之后,我不得不同意这一点。我完全反对内联样式。

其他回答

James K Nelson在他的信“为什么你不应该用JavaScript样式化React组件”中指出,实际上没有必要使用内联样式及其缺点。他的观点是,旧的无趣的CSS加上较少的/scss是最好的解决方案。他的论文中支持CSS的部分:

可扩展的外部 可分割(内联样式超越一切) define_image_transformation

我在React组件中广泛使用内联样式。我发现在组件中搭配样式非常清楚,因为组件有什么样式,没有什么样式总是很清楚的。此外,拥有Javascript的全部功能确实简化了更复杂的样式需求。

一开始我并不相信,但在尝试了几个月后,我完全转换了,并且正在将我所有的CSS转换为内联或其他js驱动的CSS方法。

Facebook员工和React贡献者“vjeux”的演示也很有帮助- https://speakerdeck.com/vjeux/react-css-in-js

我更喜欢使用样式化组件。为设计提供了较好的解决方案。

import React, { Component, Fragment } from 'react'
import styled from 'styled-components';

const StyledDiv = styled.div`
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size:200; // here we can set static
    color: ${props => props.color} // set dynamic color by props
`;

export default class RenderHtml extends Component {
    render() {
        return (
            <Fragment>
                <StyledDiv color={'white'}>
                    Have a good and productive day!
                </StyledDiv>
            </Fragment>
        )
    }
}

JSX中的样式与HTML中的样式非常相似。

HTML的例子:

Div style="background-color: red;颜色:白色”

JSX案例:

div style={{backgroundColor: '红色',color: '白色'}}

下面是JSX语法中基于布尔的样式:

style={{display: this.state.isShowing ? "inherit" : "none"}}