道具验证反应/道具类型中缺少“文本”

Question

as you may get from the title, passing props in react is not working. And i don´t get why.

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

Try using state. Get the variables into state and load the component when the state value gets filled.

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

then inside your return part use {titleText}

I haven't tested this. Give it a try.

Answer 2

Try destructuring the props like this:

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

You can keep the rest the same. Destructuring props is (usually) a better practice.

Answer 3

Does it work if you do

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
}

---

But your code should work even without it, although you would be getting that warning.

Answer 4

• this correction work for me

  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;