英文:
Parameter is missing in props validation
问题
这是 App.jsx 文件的内容：
import './App.css'
import Pp from './Pp'
export default function App() {
return (
<div>
<Pp parameter={"asdsd"} />
</div>
)
}
这是 Pp.jsx 文件的内容：
export default function Pp({ parameter }) {
return (
<h1>{parameter}</h1>
)
}
您遇到的错误是 "props 验证中缺少参数"。
英文:
That's App.jsx
import './App.css'
import Pp from './Pp'
export default function App() {
return (
<div>
<Pp parameter={"asdsd"} />
</div>
)
}
That's Pp.jsx
export default function Pp({ parameter }) {
return (
<h1>{parameter}</h1>
)
}
I get the "parameter is missing in props validation" error.
I talked to the chatgpt around like a freaking hour, but I didn't get any valid result.
答案1
得分: 0
错误来自您的代码检查工具，您需要定义propTypes：
import PropTypes from 'prop-types';
export default function Pp({ parameter }) {
return (
<h1>{parameter}</h1>
)
}
Pp.propTypes = {
parameter: PropTypes.string
};
英文:
The error is coming from your linter, you need to define propTypes:
import PropTypes from 'prop-types';
export default function Pp({ parameter }) {
return (
<h1>{parameter}</h1>
)
}
Pp.propTypes = {
parameter: PropTypes.string
};
答案2
得分: -1
你需要声明参数并将其传递给你的Pp组件。你会看到我们可以将字符串Foo传递给我们的Pp组件。此外...我们可以控制状态并在需要时将其设置为Bar。
将字面值传递给组件而不在State/hook中控制它们（除非由于某种原因需要硬编码值...但那又为什么要传递它？）只会导致混乱的编码。
import './App.css'
import Pp from './Pp'
import React, { useState } from "react"; // 能力以设置状态
export default function App() {
const [parameter, setParameter] = useState('Foo'); // 设置参数常量，并在需要时更改它
return (
<div>
<Pp
parameter={parameter}
setParameter={setParameter}
/>
</div>
)
}
Pp.jsx
// 记得从App.js组件传递的参数都要 "调用" 一下
export default function Pp({ parameter, setParameter }) {
// 你现在可以在任何地方使用 setParameter('Bar') 来设置你的参数
// 因为它存储在状态中并传递到这个组件
// setParameter('Bar'); // 取消注释这行以查看示例
return (
<h1>{parameter}</h1>
)
}
英文:
You need to declare your parameter and pass it to your Pp Component. You will see that we can pass the string Foo to our Pp component. Furthermore .. We can control the state and SET it to Bar if and when we wish.
Sending literals through to components without controlling them in a State/hook as in Joe Lissner's answer (unless for some reason you need to hard-code the value ... But then why pass it?) is just messy coding.
import './App.css'
import Pp from './Pp'
import React, {useState} from "react"; // ability to set states
export default function App() {
const [parameter, setParameter] = useState('Foo'); // Set parameter constant, and the ability to change it at will
return (
<div>
<Pp
parameter={parameter}
setParameter={setParameter}
/>
</div>
)
}
Pp.jsx
// Remember to "call" both parameters that you passed from App.js Component
export default function Pp({ parameter, setParameter }) {
// You can now use setParameter('Bar') anywhere to set your parameter as well
// Since it is stored in a state and passed to this Component
// setParameter('Bar'); // Uncomment this line for an example
return (
<h1>{parameter}</h1>
)
}
答案3
得分: -2
在你的 App.jsx 文件中，在传递 props 给 PP 组件时，移除引号。
英文:
Remove the quotes when you're passing the props in the PP component in your App.jsx file
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论