如何在React

Question

我在另一个组件中渲染一个组件，它看起来像这样：

render() {
    return (

        <MyComponent
            value={this.state.measurement.Value}
            unit="kg"
        />
    );
}

我想要做的是在值达到条件时更改测量单位。例如，如果value > 1000，则单位应为tons而不是kg。

我知道不能在那里添加if语句，我试图这样做，但它不起作用。

render() {
    return (

        <MyComponent
            value={this.state.measurement.Value}
            unit="kg"
            (value > 1000){
                 unit="tons"
            }
        />
    );
}

你有什么想法吗？

Answer 1

试试这个：

render() {
    return (

        <MyComponent
            value={this.state.measurement.Value}
            unit={this.state.measurement.Value > 1000 ? "tons" : "kg"}
        />
    );
}

Answer 2

您可以使用三元表达式。

unit={ this.state.measurement.Value>1000 ? 'tons' : 'kg' }

Answer 3

就个人而言，我喜欢这种方法。

render() {
  const value = this.state.measurement.Value
  return (
    <MyComponent
      value={value}
      unit={value > 1000 ? "tons" : "kg"}
    />
  );
}

Answer 4

您可以使用三元条件表达式：

render() {
    const Value = this.state.measurement.Value;
    const unit = Value  > 1000 ? "tons" : "kg" 
    return (

        <MyComponent
            value={Value}
            unit={unit}
        />
    );
}

Answer 5

您可以在返回时添加unit变量：

render() {
  const value = this.state.measurement.Value;
  const unit = value > 1000 ? 'tons' : 'kg';

  return (
    <MyComponent
      value={value}
      unit={unit}
    />
  );
}

Answer 6

使用以下代码：

render() {
    let measureVal = (this.state.measurement.Value < 1000) ? 'kg' : 'tons';
    return (

        <MyComponent
            value={this.state.measurement.Value}
            unit={measureVal}
        />
    );
}

Answer 7

应该是这样的

render() {
 return (
    <MyComponent
        value={this.state.measurement.Value}
        unit= {this.state.measurement.Value > 1000 ? "tons" : "kg" }
    />
 );
}