反応関数コンポーネントの背景色をランダムに変更する方法

3228 ワード

react showdev tutorial todayilearned テキストリンク

現在、私はWebアプリケーションの反応JSを使用して取り組んでいると私は選択したときに必要に応じてレンダリング機能の多くの機能があります.私は私のApp.cssファイルのほとんどすべてのコンポーネントのスタイルを定義している.しかし、私は私のコンポーネントのいずれかをランダムにバックグラウンドカラーをランダムに変更するたびに変更したい.私はJSの構文を確信していませんでした、そして、私がインターネットを見たとき、私は私が探していた正確な構文を得ませんでした.
いくつかの試行錯誤の後、私は最終的に構文をクラックし、それが働いた!そこで、ここでコミュニティと共有することを考えました.😁

import React from "react";

function MyComponent({ name }) {
  // I found this formula
  // here: https://css-tricks.com/snippets/javascript/random-hex-color/
  let randomColor = Math.floor(Math.random() * 16777215).toString(16);

  // The trouble I had was about how to use
  // the variable randomColor in "style:{}" tag
  return (
    <div className="parent-container">
      <div
        className="child-container"
        style={{ backgroundColor: "#" + `${randomColor}` }}
      >
        <h4 className="name">{name}</h4>
      </div>
    </div>
  );
}

export default MyComponent;

私はそれを行う唯一の方法かどうかわからない.しかし、他の方法があるならば、PLSはコメントで彼らを共有します.私は学ぶことを幸せになる!
読書ありがとう!畝✌

Reference

この問題について(反応関数コンポーネントの背景色をランダムに変更する方法), 我々は、より多くの情報をここで見つけました https://dev.to/pradeepradyumna/learned-how-to-change-the-background-color-of-the-react-function-component-randomly-2lel

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

スタイルコンポーネントを次へ追加する方法.JSプロジェクト

ListViewの使い方およびインスタント・リフレッシュ