propsの値を変更する方法は、どうすればいいですか？

1年 ago
綾乃, 一希
1 minute

Reactにおいて、propsは読み取り専用であり、直接変更することはできません。ただし、親コンポーネントでpropsの値を変更することができます。

  1. 親コンポーネントでprops値を変更する必要がある場合、stateを定義します。
  2. 親コンポーネントで、stateの値を変更するための関数を定義します。
  3. 子コンポーネントに変更された値をpropsを通じて渡す。
  4. 親コンポーネントから渡されたpropsを使用して子コンポーネントをレンダリングする。

以下は、例です：

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [propValue, setPropValue] = useState('initial value');

  const handleButtonClick = () => {
    // 修改propValue的值
    setPropValue('new value');
  };

  return (
    <div>
      <ChildComponent propValue={propValue} />
      <button onClick={handleButtonClick}>修改props的值</button>
    </div>
  );
}

export default ParentComponent;

// 子组件
import React from 'react';

function ChildComponent(props) {
  return <div>{props.propValue}</div>;
}

export default ChildComponent;

上記の例では、親コンポーネントであるParentComponentにstatepropValueが定義され、変更する必要のあるpropsの値を保存します。 親コンポーネントはまた、ボタンがクリックされるとhandleButtonClick関数が呼び出され、propValueの値が変更されるように定義されています。 その後、変更された値をprops経由で子コンポーネントであるChildComponentに渡してレンダリングします。

ボタンがクリックされると、子コンポーネント内のpropsの値が更新され、子コンポーネントが再レンダリングされ、変更後の値が表示されます。

bannerAds