javascript - 在 JSX 代码中将年龄数字显示为红色和粗体

Question

我有一个网页有一个按钮(更改年龄)，每次按下它都会增加人的年龄值。我怎样才能使当它的值超过 10 时，数字显示在红色背景上，并且数字本身显示为粗体？该数字应显示在红色背景上，并在“更改”和“更改年龄”按钮下方显示为粗体:

年龄是:

我需要在带有 changeBackground 函数的 JSX 中使用某种条件渲染，但我不确定如何操作。这是我的代码:

import React from 'react';

class App extends React.Component
{
    constructor(props)
    {
        super(props);


        this.changeClicked = this.changeClicked.bind(this);


        this.state = {
            name : 'jerry',
            age : 10
        }
    }


    changeClicked()
    {
        this.setState({nimi : 'Anne'});
    }


    changeAge()
    {
        //this.setState({age : this.state.age + 1, name : 'Jacob'})
        this.setState((prevStatus) => ({age : prevStatus.age + 1}));
        console.log("Age is " + this.state.age);
        //this.setState({name : 'Maureen'})
    }


    changeBackground()
    {
        this.setState({backgroundColor: 'red'});
    }

    render()
    {
        const age = this.state.age;
        const color = 'white';



        return (
            <div>
                {
                <p style={{color : 'red'}}>name and age information</p>
                }
                <h3 style={{backgroundColor : color}}>Name is {this.state.name} and age = {age}</h3>
                <button onClick={this.changeClicked}>Change</button>
                <button onClick={() => this.changeAge()}>Change age</button>
                <p>Age is: {age}</p>
                <div>

      </div>
                <Info nimi={this.state.name} address="Europe" />
            </div>
        )
    }
}





export default App;

Answer 1

您可以简单地创建一个 CSS 类来在满足条件时为元素设置样式，然后在条件匹配时应用该类。例如:-

.age-exceed-10{
color:red;
font-weight:500;
}

然后

<p className={`${this.state.age>10:"age-exceed-10":""}`}>Age is: {age}</p>