首先，我比較新，所以請隨時批評我遇到的任何型別的架構問題，我覺得有更好的方法來寫這個，但我一直在努力讓它作業一個小時。
父元素（TileGrid）：
import React, { Component } from 'react'
import Tile from './Tile.js';
export default class TileGrid extends Component {
constructor(props) {
super(props);
}
updateTileData(value) {
{/* Do something with value here */}
}
render() {
this.test()
return (
{/* The Tile component is a custom button with some richer features. */}
<Tile name='Dog' image='dog' />
)
}
}
子元素（平鋪）：
import React from 'react';
import ButtonBase from '@mui/material/ButtonBase';
import './styles/Tile.css';
function Tile(props) {
return(
<div className="Tile">
<ButtonBase onClick={/* This is where the Tile needs to call updateTileData in TileGrid */}>
Button
</ButtonBase>
</div>
);
}
export default Tile;
所以在 TileGrid 中有一個名為 updateTileData 的函式，它將獲取一些資料并使用它來更新 TileGrid 的狀態。Tile 組件作為 TileGrid 組件中的一個子組件存在。我在這里嘗試了各種各樣的東西，但這似乎是一個簡單的任務，有沒有更好的方法來撰寫這個功能？我不受代碼中的任何限制，請告訴我是否有更好的方法來做到這一點。我還在學習這個框架，這個問題讓我掛了。謝謝，阿切爾。
uj5u.com熱心網友回復：
將函式從父級傳遞給子級作為道具示例：
<Child func={this.functionInParent} />
props.func() //called inside child
uj5u.com熱心網友回復：
您需要將道具傳遞給子元素并呼叫它。
import React, { Component } from 'react'
import Tile from './Tile.js';
export default class TileGrid extends Component {
updateTileData(value) {
{/* Do something with value here */}
}
render() {
this.test()
return (
{/* The Tile component is a custom button with some richer features. */}
<Tile name='Dog' image='dog' setValue={this.updateTileData} />
)
}
}
子元素：
import React from 'react';
import ButtonBase from '@mui/material/ButtonBase';
import './styles/Tile.css';
function Tile(props) {
return(
<div className="Tile">
<ButtonBase onClick={()=>props.setValue("your value")}>
Button
</ButtonBase>
</div>
);
}
export default Tile;
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/357513.html
標籤：javascript 反应