根据传递给组件的 props 分配 styled-component CSS 属性

Question

我有两个组件 TextField 和 Label.

TextField 正在将道具 req 传递给 Label。我想根据传入的 req 道具修改样式组件。这是我当前无法正常工作的代码。

没有向控制台报告错误。

TextField.js

import React, {Component} from 'react';
import styled from 'styled-components';
import Label from '../Label/Label';

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  margin: 16px 8px 8px 8px;
`;

const Input = styled.input`
  border-bottom: 1px solid rgba(0, 0, 0, .23);

  &:focus {
    border-bottom: 1px solid #2196f3;
  }
`;

class TextField extends Component {
  render() {
    const {
      label,
      req = true,
    } = this.props;

    return (
      <Wrapper>
        <Label req={req} text={label}/>
        <Input type={'textfield'}/>
      </Wrapper>
    );
  }
}

export default TextField;

Label.js

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

const LabelBase = styled.label`
  color: rgba(0, 0, 0, .54);
  font-size: 1rem;
  line-height: 1;

  &:after {
    content: ${props => props.req ? '*' : ''};
  }
`;

class Label extends Component {
  render() {
    const {
      req,
      text,
    } = this.props;

    return (
      <LabelBase req={req}>{text}</LabelBase>
    );
  }
}

export default Label;

Answer 1

你说你想根据 ref 属性来设置组件的样式，但你似乎将该属性用作布尔值来添加文本，而不是样式，所以我只是采用了一个简化的解决方案因为 React 的 JS 样式不支持像 :after 这样的伪选择器。如果需要，还有其他解决方法，但我认为您可以执行以下操作。但是，我也提供了一种将样式传递给子组件的方法，供您参考：

class Label extends React.Component {

  render() {
    const {
      req,
      text,
      moreStyles
    } = this.props;

    const styles = {
      "color": "rgba(0, 0, 0, .54)",
      "fontSize": "1rem",
      "lineHeight": 1
    }

    return (
      <div style={{...styles, ...moreStyles}}>{text + (req ? '*' : '')}</div>
    );
  }
}

ReactDOM.render(<Label text="test" req="Yes" moreStyles={{"backgroundColor": "blue", "border": "1px solid black"}}/>, document.getElementById("root"));

<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"></div>

根据传递给组件的 props 分配 styled-component CSS 属性

Assign styled-component CSS property based on props passed to component

javascript

css

reactjs

styled-components