道具驗證反應/道具類型中缺少“文本”

Question

正如您可能從標題中了解到的那樣，在反應中傳遞道具是行不通的。 我不明白為什么。

function Global(props) {
  return (
    <div>
      <ResponsiveAppBar />
      <Grid sx={{ mt: 7 }}>
        {props.text}
        <HorizontalLinearStepper />
      </Grid>
    </div>
  );
}

  return (
    <div className="App">
      <Card>
        <CvContext.Provider value={value}>
          <Global text="kk" />
        </CvContext.Provider>
      </Card>
    </div>
  );

Answer 1

嘗試使用狀態。 將變量放入狀態並在填充狀態值時加載組件。

const [titleText, setTitleText] = useState(props.text || “”);

然后在你的返回部分使用 {titleText}

我沒有測試過這個。 試試看。

Answer 2

嘗試像這樣解構道具：

function Global({text}) {
  return (
    <div>
      <ResponsiveAppBar />
      <Grid sx={{ mt: 7 }}>
        {text}
        <HorizontalLinearStepper />
      </Grid>
    </div>
  );
}

您可以保持其余部分不變。 解構道具（通常）是一種更好的做法。

Answer 3

如果你這樣做有用嗎

import PropTypes from 'prop-types';


function Global(props) {
  return (
    <div>
      <ResponsiveAppBar />
      <Grid sx={{ mt: 7 }}>
        {props.text}
        <HorizontalLinearStepper />
      </Grid>
    </div>
  );
}

Global.propTypes = {
  text: PropTypes.string
}

---

但是即使沒有它，您的代碼也應該可以工作，盡管您會收到該警告。

Answer 4

• 這個修正對我有用

  import PropTypes from "prop-types"; function Global(props) { Global.propTypes = { text: PropTypes.string, }; return ( <div> <ResponsiveAppBar /> <Grid sx={{ mt: 7 }}> {props.text} <HorizontalLinearStepper /> </Grid> </div> ); } export default Global;