Next.js 使用 getServerSideProps 如何将道具从页面传递到组件？
Posted
技术标签:
【中文标题】Next.js 使用 getServerSideProps 如何将道具从页面传递到组件？【英文标题】：Next.js using getServerSideProps how do i pass props from page to components? 【发布时间】：2021-06-30 20:58:58 【问题描述】：我正在尝试获取coingecko-api 以访问比特币的实时价格。我正在尝试将 getServerSideProps 的返回道具传递给我的 <CalculatorBuy /> 组件，该组件是 <Main /> 组件的一部分。我试图在calculatorbuy.js 中导入异步函数，但我得到了未定义的对象。如何将道具从index.js 传递到main.js 和calculatorbuy.js 组件。在 index.js 中，一切都像魅力一样工作，但我想直接在组件中使用 props 值。
index.js
export default function Home(props)
const data = props.result;
console.log(data);
return (
<div className="container">
<Head>
<title>Buy BTC</title>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
</Head>
<Header />
<Main />
<Footer />
<style jsx> `
.container
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
` </style>
</div>
)
export async function getServerSideProps(context)
const result = await coinGeckoClient.simple.price(
ids: "bitcoin",
vs_currencies: "eur",
);
return
props:
result,
,
main.js
import React, useState from 'react';
import Button from '@material-ui/core/Button';
import Calculatorbuy from './calculatorbuy.js'
import Calculatorsell from './calculatorsell.js'
export default function Main()
const [ showMe, setShowMe ] = useState(true);
function toggle ()
if (!showMe)
setShowMe(true);
else
setShowMe(true);
function toggle2 ()
if (showMe)
setShowMe(false);
else
setShowMe(false);
return (
<main className="main">
<div className="box">
<div className="buttons">
<Button onClick=toggle variant="outlined" color="primary" style=width: 120, marginRight: 10>
KUP
</Button>
<Button onClick=toggle2 variant="outlined" color="secondary" style=width: 120, marginRight: 10>
SPRZEDAJ
</Button>
<Button variant="outlined" color="default" style=width: 120,>
HISTORIA
</Button>
</div>
<div style= display: showMe?"block":"none" >
<Calculatorbuy />
</div>
<div style= display: !showMe?"block":"none" >
<Calculatorsell />
</div>
</div>
<div className="room-for-socials"></div>
import React, useState from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Livebsv from './livebsv.js';
export default function Calculatorbuy()
const [value, setValue] = useState(0);
return (
<form className="calculator" noValidate autoComplete="off">
<div>
<Livebsv />
</div>
<div className="typebox">
<div className="textfield">
<TextField error=false id="outlined-number" label="PLN" helperText="Min. wartość 100zł"
type="tel"
value=value
InputProps=
inputProps: min: "100", max: "5000", step: "0.01"
variant="outlined"
onKeyPress=(e) =>
if (!/[0-9]/.test(e.key))
e.preventDefault();
onChange=(e) => setValue(e.currentTarget.value)
onKeyPress=(e) =>
if (!/[0-9]/.test(e.key))
e.preventDefault();
onBlur=(e) =>
if (e.currentTarget.value > 0 & e.currentTarget.value < 100 )
setValue(100);
else if (e.currentTarget.value > 5000)
setValue(5000);
/>
</div>
<div className="textfield">
<TextField disabled id="outlined-disabled" value=(value).toFixed(8) label="BSV" variant="outlined"
【问题讨论】：
您可以使用React Context 使树下组件中的数据可用。 【参考方案1】：通过在 index.js(getServerSideProps) 上加载结果，您开始得很好。
然后，要将数据传递给 Main，您必须将其添加为组件的属性：
<Main data=data />
现在，由于 Main 需要一个参数，它必须在 main.js 中定义：
export default function Main(props)
const data = props.data;
...
然后，对于 Calculatorbuy 组件，您必须在 Main 上执行相同的操作。定义 props 并使用它。
【讨论】：
谢谢，我明白了！ 现在，如果您投票并接受答案，那就太好了。 ? 已接受答案，但我的声誉太低，无法投票：D以上是关于Next.js 使用 getServerSideProps 如何将道具从页面传递到组件？的主要内容，如果未能解决你的问题，请参考以下文章