Question

我有两个组件 TextField 和标签。

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>

根据传递给组件的道具分配样式组件的CSS属性

1 个答案: