在React中,创建一个简单的计数器,可以根据计数器的值更改颜色。

huangapple go评论63阅读模式
英文:

Simple counter changing the color of counter value in react ja

问题

在计数应用程序中,我希望计数值的颜色应该如下(如果计数>0-值应该显示为"绿色",如果计数<0,值应该是"红色"。

英文:

in counter app i want color of counter value should be as (if counter>0- value should be displayed in "green" and counter<0 value should be in "red"

答案1

得分: 0

你可以使用 Hooks 的 useEffect 来实现这个功能。

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 类似于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器 API 更新文档标题
    document.title = `你点击了 ${count} 次`;
  });

  return (
    <div className={`${(count <= 0) ? "red" : "green"}`}>
      <p>你点击了 {count} </p>
      <button onClick={() => setCount(count + 1)}>
        点我
      </button>
    </div>
  );
}

我只翻译了代码部分,没有包括注释和链接。

英文:

You can use Hooks useEffect for that.

import React, { useState, useEffect } from &#39;react&#39;;

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() =&gt; {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    &lt;div className={`${(count &lt;= 0) ? &quot;red&quot; : &quot;green&quot;}`}&gt;
      &lt;p&gt;You clicked {count} times&lt;/p&gt;
      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
        Click me
      &lt;/button&gt;
    &lt;/div&gt;
  );
}

I just followed the official documentation the added a basic ternary operator

huangapple
  • 本文由 发表于 2023年2月8日 17:40:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/75383832.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定