Question

我有一个状态对象，可以有3个值中的1个。我在每种情况下呈现不同的东西。

      {this.state.progress === 'choose' ? 'Choose your settings' : null}
      {this.state.progress === 'running' ? 'GO!' : null}
      {this.state.progress === 'done' ? 'Done' : null}

我的代码工作正常但是必须有一个更短的方法来编写它？

Answer 1

使用一个对象（或ES6 Map）来保存对每个进度值的响应：

对象（字典）：

＆＃13;

const labels = {
  choose: 'Choose your settings',
  running: 'GO!',
  done: 'Done'
};

const progress = 'running'; // this.state.progress

const currentLabel = labels[progress] || null;

console.log(currentLabel);

＆＃13;

ES6地图：

＆＃13;

const labels = new Map([['choose', 'Choose your settings'],   ['running', 'GO!'], ['done', 'Done']]);

const progress = 'running'; // this.state.progress

const currentLabel = labels.get(progress) || null;

console.log(currentLabel);

＆＃13;

Answer 2

我将它变成一个单独的函数，然后调用它：

function getProgressText(progress) {
  switch (progress) {
    case 'choose':
      return 'Choose your settings'
    case 'running':
      return 'Go!';
    case 'done':
      return 'Done';
    default:
      return null;
  }
}

...

<MyComponent>{getProgressText(this.state.progress)}</MyComponent>

Answer 3

缩短方式：D：

const { progress } = this.state;
{ progress === 'choose' && 'Choose your settings' }
{ progress === 'running' && 'GO!' }
{ progress === 'done' && 'Done' }

Answer 4

即使您可以组合多个四元运算符，它也会变得有点混乱且难以阅读。我会建议另一种方法。

您可以创建一个可以返回与getProgressText = () => { const { progress } = this.state; switch(progress) { case 'choose': return 'Choose your settings'; case 'running': return 'GO!'; case 'done': return 'Done'; default: // handle empty/null/undefined/different value then what you expect break; } } render() { return(this.getProgressText()) }相关的值的函数。这样，如果您将另一个选项添加到进度列表中，它将更容易添加，并且您还可以处理进度为空/ null /未定义的可能性并防止可能的错误。

示例

public static List<ArrayList> GetPowerTrendline(List<KeyValuePair<int,double>> xyValues) { var trendlinePoints = new List<ArrayList>(); var dataLen = xyValues.Count; var xSum = xyValues.Sum(h => h.Key); var ySum = xyValues.Sum(h => h.Value); var XYSum = xyValues.Sum(h => h.Key * h.Value); var xp2Sum = xyValues.Sum(x => Math.Pow(x.Key, 2)); var a = (ySum * xp2Sum - xSum * XYSum) / (dataLen * xp2Sum - Math.Pow(xSum, 2)); var b = ((dataLen * XYSum) - (xSum * ySum)) / (dataLen * xp2Sum - Math.Pow(xSum,2)); foreach (var x in xyValues.OrderBy(h => h.Key)) { var pointY = a + b * x.Key; var rounded = Math.Round(pointY, 2); trendlinePoints.Add(new ArrayList { x.Key, rounded }); } return trendlinePoints; }

Answer 5

const texts = {'choose': 'Choose your settings', ... }

然后：

{texts[this.state.progress]}

Answer 6

解决问题的最佳方法是使用switch / case操作符的附加方法。

＆＃13;

    
renderProgress = () => (
    switch(this.state.progress) {
      case 'choose': 
        return 'Choose your settings';
      case 'running': 
        return 'GO!';
      case 'done': 
        return 'Done';
      default:
        return null;
    }
);


render() {
  return (
    <div>
      {this.renderProgress()}
    </div>
  );
}

＆＃13;

用于在React中渲染的第四个运算符？

6 个答案: