const DataContext = React.createContext();
const Button = () => {
const data = React.useContext(DataContext);
const pay = () => {
window.alert(`你已成功購買 ${data.title}`);
}
return (
<button type="button" onClick={ pay }>點我購買({ data.price } $)</button>
)
}
const Card = ({ data }) => {
return (
<div>
<h5>產品名稱:{ data.title }</h5>
<Button />
</div>
)
}
const Products = () => {
const [ data, setData ] = React.useState({
title: 'PlayStation5',
price: 75000,
});
return (
<DataContext.Provider value={ data }>
<ul>
<li key={ data.title }>
<Card data={ data } />
</li>
</ul>
</DataContext.Provider>
)
}
const App = () => {
return (
<div>
<Products />
</div>
)
}
const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);
View Compiled