stringの値を渡す。
useStateで定義した関数を子に渡して子から関数を呼べば親の状態も変更することができます。
親コンポーネント
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import Child from './Child'; import React from 'react'; function Parent() { const [value, setValue] = React.useState("") return ( <div className="App"> 親要素 <Child setValue = {setValue} /> {value} </div> ); } export default Parent; |
子コンポーネント
|
1 2 3 4 5 6 7 8 9 10 11 |
function Child(props) { const message = 'テスト' return ( <div className="App"> 子要素 <p>{props.setValue(message)}</p> </div> ); } export default Child; |
配列の値を渡す。
配列の場合も以下のようにすれば値を渡せます。「...value」としているのは['あ','い','う']という配列があれば中身の「'あ','い','う'」を展開した上でその後ろについている'あ'を付加した新しい配列を生成しています。
親コンポーネント
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import Child from './Child'; import React from 'react'; function Parent() { const [value, setValue] = React.useState([]) return ( <div className="App"> 親要素 <Child onClick = {() => setValue([...value,'あ'])} /> {value} </div> ); } |
子コンポーネント
|
1 2 3 4 5 6 7 8 9 10 11 |
function Child(props) { const message = 2 return ( <div className="App"> 子要素 <button onClick={props.onClick}>ボタン</button> </div> ); } export default Child; |
この記事へのコメントはありません。