代码之家 › 专栏 › 技术社区 › four-eyes

将默认道具样式与内联样式组合

jsx reactjs css javascript

four-eyes · 技术社区 · 6 年前

我有一个这样的组件

class SomeComponent extends React.Component {
    constructor(props) {
        super(props);
    };

    render() {
        return (
            <div
                style={{...styles.container, ...this.props.containerStyles}} />
            <div 
                style={{...styles.headline, ...this.props.headlineStyles}} />
        )
    };
};

const styles = {
    container: {
        width: '50px'
        height: '60px',
    },
    headline: {
        color: 'red',
};

SomeComponent.defaultProps = {
    backgroundColor = 'grey',
    overflow: 'hidden',
    fontSize: 20,
};

styles.container 具有 this.props.containerStyles defaultProps ? 想象一下 this.props.containerStyles这个.props.containerStyles 只是 backgroundColor ,但不是 overflow . 我想要 overflow: hidden 从 默认道具 . 在另一边,如果没有东西通过 this.props.containerStyles这个.props.containerStyles 默认道具 样式.容器

有办法吗 默认道具 或者我必须使用 JavaScript 逻辑,比如(伪代码)

 let fancyStyleObj = {};
 if(this.props.containerStyles.backgroundColor) {
     fancyStyleObj.backgroundColor = this.props.containerStyles.backgroundColor 
 } else { 
     fancyStyleObj.backgroundColor = 'grey'
 }

默认道具 因为我必须写 默认道具 else 条款。

1 回复 | 直到 6 年前

Mayank Shukla 6 年前

你的方法是正确的,但你在这里犯了错误:

SomeComponent.defaultProps = {
    backgroundColor = 'grey',
    overflow: 'hidden',
};

这样,背景色和溢出将在内部可用 this.props ,不在 this.props.containerStyles containerStyles .

SomeComponent.defaultProps = {
  containerStyles: {
    backgroundColor: 'grey',
    overflow: 'hidden',
  }
};

或使用:

style={{ ...styles.container, ...this.props }}

工作示例(使用 this.props.containerStyles这个.props.containerStyles

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
  };

  render() {
    return (
      <div
        style={{ ...styles.container, ...this.props.containerStyles }}>
        hello
      </div>
    )
  };
};

const styles = {
  container: {
    width: '50px',
    height: '60px',
  },
};

SomeComponent.defaultProps = {
  containerStyles: {
    backgroundColor: 'grey',
    overflow: 'hidden',
  }
};

const rootElement = document.getElementById("root");
ReactDOM.render(<SomeComponent />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root' />

工作示例(使用 这个道具 ):

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
  };

  render() {
    return (
      <div
        style={{ ...styles.container, ...this.props }}>
        hello
      </div>
    )
  };
};

const styles = {
  container: {
    width: '50px',
    height: '60px',
  },
};

SomeComponent.defaultProps = {
  backgroundColor: 'grey',
  overflow: 'hidden',
};

const rootElement = document.getElementById("root");
ReactDOM.render(<SomeComponent />, rootElement);

<script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react dom.min.js”></script>