React週末#6
17255 ワード
#6ベッドで転がる
userefを使用して特定のDOMを選択
JavaScriptでは、特定のDOMを選択する必要がある場合は、getElementByIdやquerySelectorなどのDOMセレクタ関数を使用する必要があります.
反応中に式DOMを直接選択する必要がある場合がある.
このとき、反応にrefを用いる.
関数型素子でrefを使用する場合はuserefというhook関数を使用します.
クラス構成部品では、コールバック関数またはreactを使用します.createRefという名前の関数を使用することは、現在は重要ではありません.
userefを使用して、以前に作成したInputSample初期化ボタンをクリックすると、名前入力に焦点を当てることができます.
InputSample.js
import React, { useState, useRef } from 'react';
function InputSample() {
const [inputs, setInputs] = useState({
name: '',
nickname: ''
});
const nameInput = useRef();
const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출
const onChange = e => {
const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
setInputs({
...inputs, // 기존의 input 객체를 복사한 뒤
[name]: value // name 키를 가진 값을 value 로 설정
});
};
const onReset = () => {
setInputs({
name: '',
nickname: ''
});
nameInput.current.focus();
};
return (
<div>
<input
name="name"
placeholder="이름"
onChange={onChange}
value={name}
ref={nameInput}
/>
<input
name="nickname"
placeholder="닉네임"
onChange={onChange}
value={nickname}
/>
<button onClick={onReset}>초기화</button>
<div>
<b>값: </b>
{name} ({nickname})
</div>
</div>
);
}
export default InputSample;
useref()を使用してRefオブジェクトを作成し、選択したいDOMのref値に設定する必要があります.このとき、Refオブジェクトの.Current値は、必要なDOMを示します.
上記のコードでは、onReset関数がフォーカス入力のfocus()APIを呼び出します.
nameInput.current.focus();
結果は...[初期化](Initialization)をクリックすると、名前inputラベルにフォーカスが入ります.
まだあります.
const refContainer = useRef(initialValue);
userefは.現在のプロファイルに渡されたパラメータ(InitialValue)によって初期化された変更可能なrefオブジェクトを返します.レンダーアレイ(Render Array)
今回は、オブジェクトではなくリアクターでアレイをレンダリングする方法について説明します.
const users = [
{
id: 1,
username: 'velopert',
email: '[email protected]'
},
{
id: 2,
username: 'tester',
email: '[email protected]'
},
{
id: 3,
username: 'liz',
email: '[email protected]'
}
];
こんな配列があると仮定!このスキームを構成部品としてレンダリングするにはどうすればいいですか?
コードに従って作成すればいいので、以下に示すように、srcフォルダにUserListというファイルを作成して構成部品を作成します.
UserList.js
import React from 'react';
function UserList() {
const users = [
{
id: 1,
username: 'velopert',
email: '[email protected]'
},
{
id: 2,
username: 'tester',
email: '[email protected]'
},
{
id: 3,
username: 'liz',
email: '[email protected]'
}
];
return (
<div>
<div>
<b>{users[0].username}</b> <span>({users[0].email})</span>
</div>
<div>
<b>{users[1].username}</b> <span>({users[1].email})</span>
</div>
<div>
<b>{users[2].username}</b> <span>({users[1].email})</span>
</div>
</div>
);
}
export default UserList;
上のようにコードを書いてみましたが、繰り返し使用するコードをすべて入れるのは効率的ではないので、コンポーネントを繰り返し使用できるコードを再作成します.UserListファイルを再修正すると...
ああ!また、1つの構成部品ではなく複数の構成部品を1つのファイルに宣言しても問題ありません.
UserList.js
import React from 'react';
function User({ user }) {
return (
<div>
<b>{user.username}</b> <span>({user.email})</span>
</div>
);
}
function UserList() {
const users = [
{
id: 1,
username: 'velopert',
email: '[email protected]'
},
{
id: 2,
username: 'tester',
email: '[email protected]'
},
{
id: 3,
username: 'liz',
email: '[email protected]'
}
];
return (
<div>
<User user={users[0]} />
<User user={users[1]} />
<User user={users[2]} />
</div>
);
}
export default UserList;
これで、Appファイルで構成部品をレンダリングします.App.js
import React from 'react';
import UserList from './UserList';
function App() {
return (
<UserList />
);
}
export default App;
結果は...100以上の配列がある場合は、1つずつクエリーし、1つずつレンダリングするのは効率的ではなく、JavaScript配列の内蔵関数map()を使用することができます.
map()関数は、配列内の各要素を新しい配列に変換します.
ダイナミックアレイをレンダリングする場合、リアクターはmap関数を使用して通常のデータアレイをリアクターからなるアレイに変換します.
UserListコンポーネントを変更するには、次の手順に従います.
UserList.js
import React from 'react';
function User({ user }) {
return (
<div>
<b>{user.username}</b> <span>({user.email})</span>
</div>
);
}
function UserList() {
const users = [
{
id: 1,
username: 'velopert',
email: '[email protected]'
},
{
id: 2,
username: 'tester',
email: '[email protected]'
},
{
id: 3,
username: 'liz',
email: '[email protected]'
}
];
return (
<div>
{users.map(user => (
<User user={user} />
))}
</div>
);
}
export default UserList;
このように記述すると、すべての要素はmap関数を1回書き込むだけで、各配列の要素を繰り返し書き込むのではありません.しかし、ブラウザのコンソールに行くと、特定のエラーが表示されます.
リアクターでアレイをレンダリングする場合はkeyというpropsを設定する必要があります.
key値は、要素ごとに一意の値を設定する必要があります.上記の場合、idは一意の値です.
keypropを追加すると...
UserList.js
return (
<div>
{users.map(user => (
<User user={user} key={user.id} />
))}
</div>
);
配列に一意の値がない場合、map関数を使用する場合に設定されるコールバック関数の2番目のパラメータindexがkeyに設定されます.<div>
{users.map((user, index) => (
<User user={user} key={index} />
))}
</div>
ここで整理すると….map関数が鍵を必要とする理由は
感じ:
Reference
この問題について(React週末#6), 我々は、より多くの情報をここで見つけました https://velog.io/@klucas/React-주말-6テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol