在React中，子组件可以通过改变父组件的状态来改变

2 年 ago

清, 宇

1 minute

背景 –

在开发Web应用程序时，我想用React+TypeScript创建一个类似下面的页面。但是，我不知道如何将子组件的状态变化（在这里是”选择显示数量的选择器”）反映到渲染为另一个组件（在这里是card组件）的显示数量中，所以我进行了调查，并将其作为备忘录保存。

本次要做的是如上所示的图像中，将子组件中的展示数量变更用的选择器的变更传递给主页面（父组件），并根据变更后的状态来控制同样是子组件的卡片组件的展示数量的实现。

环境

TypeScript 4.9.4
React 18.2.0
（请注意，我们在web应用程序框架中使用了Ruby on Rails）

实施

重点是在props中设置用于更新状态的方法（setValue），然后将希望从父组件更新的状态（count）的更新方法（setCount）传递给它。

子コンポーネント

セレクタの実装はほとんどMaterial UIの実装をまねしました．
React Select component – Material UI

BasicSelect.tsx
import * as React from ‘react’;
import Box from ‘@mui/material/Box’;
import InputLabel from ‘@mui/material/InputLabel’;
import MenuItem from ‘@mui/material/MenuItem’;
import FormControl from ‘@mui/material/FormControl’;
import Select, { SelectChangeEvent } from ‘@mui/material/Select’;

type Props = {
value: number|string, // state
setValue // callback （stateを変更するためのprops）
options: Array
};

export const BasicSelect = ({value, options, setValue}: Props) => {
const handleChange = (event: SelectChangeEvent) => {
setValue(event.target.value); //親コンポーネントへのstateの引き渡し
};

return (

表示数

);
}

親コンポーネント
ここでのカードの実装やindexページの実装もMaterial UIを頼らせていただきました．
いくつか割愛している箇所もあるので，気になる方は下記のドキュメントをご覧ください．
React Grid component – Material UI
React Card component – Material UI

index.tsx
import { MyCard } from ‘app/javascript/components/MyCard/MyCard’; //表示するカードコンポーネント(ここの実装は割愛します．詳細は参考文献をご覧ください)
import { BasicSelect } from ‘app/javascript/components/BasicSelect/BasicSelect’; //子コンポーネントのインポート
import { Grid, Box} from ‘@mui/material’;
import React from ‘react’;
import ReactDOM from ‘react-dom’;

export const Index = () => {
const display_count_options = [1, 2, 3, 4]; //selector options
const [count, setCount] = React.useState(2); //state変数，初期値と更新のための関数を宣言
const { card_data } = getCardData(); //表示するCardに記載する内容を配列で取得(ここの実装は割愛します．詳細は参考文献をご覧ください)

return (
<>

{card_data.slice(0,count).map((data) =>

)}

</>
);
};

ReactDOM.render(, document.getElementById(‘Index’));

结果 –

文献引用

Material UIでカードを作成してグリッドで整理する方法｜廻遊者!!