Q&A
javascript自体勉強中の者です。
nodeは使わず、cdnのライブラリを使ってreactの勉強をしています。
関数コンポーネントでuseStateを使いたいのですが、下記がエラーになります。
- ただ子にdataを渡すだけのコードです。
- 沢山
useStateを呼び出してますが、エラーになるか検証するだけで作成した関数は使ってません
html
1<!DOCTYPE html> 2<html lang='en'> 3<head> 4 <meta charset='UTF-8'> 5 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 6</head> 7<body> 8 <div class="main"></div> 9 10 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 11 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> 12 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 13 14 <script type="text/babel"> 15 16'use strict'; 17 18const { useState,useEffect } = React 19 20///////////////////////////////////////////////////////////// 21const Main = () =>{ 22 //const data="mydata" 23 const [data, setData] = useState("mydata1") // ↑を使うと動く 24 25 return ( 26 <div> 27 <Sub1a data={data+"1"} /> 28 <Sub2a data={data+"2"} /> 29 </div> 30 ) 31} 32///////////////////////////////////////////////////////////// 33const Sub1a = (props) => { 34 const [data, setData] = useState(props.data) 35 return <Sub2b data={data} /> 36} 37///////////////////////////////////////////////////////////// 38const Sub1b = (props) => { 39 const [data, setData] = useState(props.data) 40 return <div>{data}</div> 41} 42///////////////////////////////////////////////////////////// 43const Sub2a = (props) => { 44 const [data, setData] = useState(props.data) 45 return <Sub1b data={data} /> 46} 47///////////////////////////////////////////////////////////// 48const Sub2b = (props) => { 49 const [data, setData] = useState(props.data) 50 return <div>{data}</div> 51} 52///////////////////////////////////////////////////////////// 53 54ReactDOM.render( 55 Main(), 56 document.querySelector('.main') 57); 58 </script> 59</body> 60</html>
なぜMainのuseStateだけまともに動かせないのでしょうか？
そういう仕様だと思って考えない方がいいのでしょうか？
Mainコンポーネントを介して、Sub1a,Sub2aの間のデータのやり取りをさせたいです。
ネストを深くすれば使えるようなのですが、ここらで仕様をハッキリと知っておきたい感じです。
以上、よろしくお願いします。
回答1件
0
ベストアンサー
以下の修正でどうでしょ？
diff
1 ReactDOM.render( 2- Main(), 3+ <Main />, 4 document.querySelector('.main') 5 );
投稿2021/10/19 11:16
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/19 11:20