JSXにJava Scriptを埋め込む

2024年6月19日

目的

前回に引き続きReactに関して。

JavaScriptの埋め込み

JSの式は{ }を使用することで埋め込みをすることができる。

今回はタイトルとCSSに対して式を埋め込んだ。

ちなみに、JSのメソッドも使用することができる。

toLocaleLowerCase()は全てを小文字にするメソッドになる。

import "./Expression.css";

const Expression = () =>{
    const title = "Expression";
    const arr = ["item1","item2","item3"];
    //{ }を使用してJSの式を埋め込むことができる
    const hello = (arg) => `${arg} Function`;
    const jsx = <h3>Hello JSX</h3>;
    const bool = true;

    return(
        <div className = {title.toLocaleLowerCase()}> 
            <h3>Hello {title}</h3> 
            <h3>{arr}</h3>
            <h3>{hello('hello')}</h3>
            <h3>{/*画面上に表示はされない */}</h3>
            {<h3>Hello JSX</h3>}
            {jsx}
            {bool}
        </div>
    )
}
export default Expression;

補足

booleanの値は画面上には出力されない。

式と文の違い

jsx内では式のみ使用することができる。

・式：　何らかの値を返すもの（変数に代入できるもの）

const expression1 = 1;
const expression2 = () => 'function';
const expression2 = 1 === 1; //表示はされないが使用はできる。

・文：　変数宣言、for文、if文、switch文やセミコロンで区切るもの。

const statement1　= const hoge = 1
const statement2 = if(hoge = true){ ...}

三項演算子は式なので、jsx内でも使用できる。

const sanko = true ? 'hello' : 'bye';

コンポーネントに値を渡す

次のようにして値をコンポーネントに渡すことができる。

この場合は、propsのcolorをredとしているので、classNameにredが渡され

赤色に変化する。

import "./Child.css";

const Child = (props) => {
  return (
    <div className= {`component ${props.color}`}>
      <h3>Hello Component</h3>
    </div>
  );
};

export default Child;

import Child from "./components/Child";

const Example = () => {
    return(
        <>
            <Child color= "" />;
            <Child color= "red" />;
        </>
    )
}
export default Example;

.App-start .component{
  padding: 1rem;
  color: blue;
  border: 5px solid blue;
}
.App-start .component.red{
  padding: 1rem;
  color: rgb(255, 0, 0);
  border: 5px solid rgb(255, 0, 0);
}

分割代入

JavaScriptの分割代入を行うこともできる。

import "./Child.css";

const Child = ({color}) => {
  return (
    <div className= {`component ${color}`}>
      <h3>Hello Component</h3>
    </div>
  );
};

export default Child;

デフォルト引数の表記

import "./Child.css";

const Child = ({color = 'green'}) => {
  return (
    <div className= {`component ${color}`}>
      <h3>Hello Component</h3>
    </div>
  );
};

export default Child;

連想配列{ 　　}の値の取り方

{…変数}の形で表記することでkeyをそれぞれ受け取ることができる。

import Profile from "./components/Profile";

const profile = [
  { name: "Takashi", age: 19, country: "Japan" },
  { name: "Jane", age: 28, country: "UK" },
];

const Example = () => {
  return (
    <div>
      <Profile
        name={profile[0].name}
        age={profile[0].age}
        country={profile[0].country}
      />
      {/* name,age,countryを受け取れる */}
      <Profile {...profile[1]} />
      <Profile />
    </div>
  );
};

export default Example;

{ 　　}で引数を囲む。それぞれに値を指定することで、デフォルト引数として、値を受け取ることができる。

import "./Profile.css";

const Profile = ({name = "John Doe",age = "??",country = "Japan"}) => {
  return(
    <>
      <div className="profile">
        <h3>{`Name: ${name}`}</h3>
        <h3>{`Age: ${age}`}</h3>
        <h3>{`From: ${country}`}</h3>
      </div>
    </>
    )
};

export default Profile;

今回はここまで。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！