Question

我试图制作一个信号条，根据强度数（1-3），将显示黑色（激活）的相应条形数量，否则为灰色。所以在React我使用了以下内容：

class Application extends React.Component {

  signalBar{
    switch(this.props.signal-strength) {
    case 1:
        < className={{'first-bar, signal-bars, bar'}}  style={{display: 'block', color 'black'}}>
        < className={{'second-bar, signal-bars, bar'}}  style={{display: 'block', color 'grey'}}>
        < className={{'third-bar, signal-bars, bar'}} style={{display: 'block', color 'grey'}}>
        break;
    case 2:
         < className={{'first-bar, signal-bars, bar'}}  style={{display: 'block', color 'black'}}>
          < className={{'second-bar, signal-bars, bar'}}  style={{display: 'block', color 'black'}}>
          < className={{'third-bar, signal-bars, bar'}} style={{display: 'block', color 'grey'}}>
    case 3:
         < className={{'first-bar, signal-bars, bar'}} style={{display: 'block', color 'black'}}>
            < className={{'second-bar, signal-bars, bar'}}  style={{display: 'block', color 'black'}}>
           < className={{'third-bar, signal-bars, bar'}} style={{display: 'block', color 'black'}}>
        break;

    default:

        < className={{'first-bar bar'}}  style={{display: 'block', color 'grey'}}>
        < className={{'second-bar bar'}}  style={{display: 'block', color 'grey'}}>
        < className={{'third-bar bar'}}  style={{display: 'block', color 'grey'}}>    
    }
      }

  render() {

    return <div className={{sizing-box}}>
       <div className={{signal-bars, bar}}>
          {this.signalBar}
        </div>
         </div>
      <p>

      </p>
    </div>;
  }
}


React.render(<Application />, document.getElementById('app'));

CSS：

html, body
  height: 100%

body
  background: #333
  display: flex
  justify-content: center
  align-items: center;     
  { box-sizing: border-box; }

.sizing-box {
  height: 50px;
  width: 80px;
}

.signal-bars {
  display: inline-block;

}

.signal-bars .bar {
  width: 14%;
  margin-left: 1%;
  min-height: 20%;
  display: inline-block;
}
.signal-bars .first-bar  { height: 30%; }
.signal-bars .second-bar { height: 60%; }
.signal-bars .third-bar  { height: 90%; }

信号强度的值不是静态的，可以根据父元素的优点而改变。我得到的错误是＆＃39;这是一个保留字＆＃39;。如何有人注入函数＆＃39; signalBar＆＃39;在一个React元素？还有一个更简单的＆＃39;在切换条件下使用较少编码来实现此目的的方法？

Answer 1

我喜欢使用npm的classnames包。

例如：

public class SecondFragment extends Fragment implements onMapReadyCallback {
  private GoogleMap mMap;

  public GoogleMap getMap() {
    return mMap;
  }
  ...
}

或者，您可以将所有逻辑移到DIV之外：

    <div className={classnames('first-bar', {'signal-bars': this.state.signal-strength === 1})} />

Answer 2

使用内联样式，您可以执行以下计算样式：

const colorScheme = {
    first: ['grey', 'black', 'black', 'black'],
    second: ['grey', 'grey', 'black', 'black'],
    third: ['grey', 'grey', 'grey', 'black'],
}
class Application extends React.Component {
  render() {
    const colorNb = ((this.props.signal-strength < 4) && (this.props.signal-strength > 0)) ? this.props.signal-strength : 0;

    return (
       <div className={{sizing-box}}>
          <div className={{signal-bars, bar}}>
             <div className={{'first-bar, signal-bars, bar'}}  style={{display: 'block', color: colorScheme.first[colorNb] }} />
             <div className={{'second-bar, signal-bars, bar'}}  style={{display: 'block', color: colorScheme.second[colorNb] }} />
             <div className={{'third-bar, signal-bars, bar'}} style={{display: 'block', color: colorScheme.third[colorNb] }} /> 
         </div>
     </div>
    );
  }
}

如果你可以控制你的CSS，你也可以使用child selector和继承来减少你的classeNames吧：

.signal-bars {
  display: inline-block;
}

.signal-bars div {
  width: 14%;
  margin-left: 1%;
  min-height: 20%;
  display: block;
}
.signal-bars div:nth-child(1)  { height: 30%; }
.signal-bars div:nth-child(2) { height: 60%; }
.signal-bars div:nth-child(3)  { height: 90%; }

然后你的组件会更干净：

return (
   <div className="sizing-box">
       <div className="signal-bars">
           <div style={{ color: colorScheme.first[colorNb] }} />
           <div style={{ color: colorScheme.second[colorNb] }} />
           <div style={{ color: colorScheme.third[colorNb] }} /> 
       </div>
   </div>
);

元素中的CSS样式的条件渲染React

2 个答案: