Question

我有一个像这样的组件

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中只有backgroundColor，而不是overflow。我想要overflow: hidden中的defaultProps。另一方面，如果没有任何东西通过this.props.containerStyles，我希望所有defaultProps。在任何情况下，都应始终使用styles.container。

是否可以使用defaultProps来做到这一点，还是必须使用JavaScript逻辑，例如（伪代码）

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

但是，这将绕过defaultProps，因为我必须将defaultProps写入else子句中。

Answer 1

您的方法是正确的，但是您在这里做错了：

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

通过这种方式，backgroundColor和溢出将在this.props内部可用，而不在this.props.containerStyles中可用。在containerStyles中定义值。

这样写：

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

或使用：

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

工作示例（带有this.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' />

工作示例（带有this.props）：

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>

<div id='root' />

将默认的道具样式与内联样式相结合

1 个答案: