如何解决反应:在根文件中对包含两个其他组件的组件使用props
我正在尝试创建一个名为“问题”的组件,该组件将包含另外两个名为“问题头”和“ PosterGrid”的组件并将它们连接在一起(基本上是带有电影img和电影名称的电影卡的集合,以及演员名单)。
因此,我不必在根“ index.tsx”文件中调用两个单独的组件,而只需调用QuestionHeader组件
但是,我不确定如何执行此操作以及如何使用道具来填充这些组件内部的字段。我尝试过四处搜寻,但仍然感到困惑。
问题组件
s=pd.Series([2,4,6])
s.iloc[1:]/s.iloc[:-1]
Out[54]:
0 NaN # here the index s.iloc[:-1] included
1 1.0
2 NaN # here the index s.iloc[1:] included
dtype: float64
QuestionHeader组件
outer
PosterGrid(只是其中的相关部分):
import React from 'react';
import { Styles } from 'types/index';
import QuestionHeader from './QuestionHeader';
import PosterGrid from './PosterGrid';
interface QuestionProps {
question: string;
}
const Question = (props: QuestionProps): JSX.Element => {
const styles: Styles = {
container: {
display: 'block',height: 'fit-content',width: 'fit-content',padding: 'auto 0',},};
return (
<div style={styles.container}>
<QuestionHeader question={'Which movie do you like?'}/>
<div>{PosterGrid}</div>
</div>
);
};
export default Question;
index.tsx根文件
import React from 'react';
import { Styles } from 'types/index';
import Colors from 'values/Colors';
import { PosterCardSize } from 'values/PosterCard';
interface QuestionHeaderProps {
question: string;
}
const QuestionHeader = (props: QuestionHeaderProps): JSX.Element => {
const { question } = props;
const styles: Styles = {
container: {
height: `${PosterCardSize.HEIGHT}px`,width: `${PosterCardSize.WIDTH * 3}px`,backgroundColor: Colors.BLUE,borderRadius: '5px',display: 'flex',alignItems: 'center',justifyContent: 'center',};
return (
<div style={styles.container}>
<p>{question}</p>
</div>
);
};
export default QuestionHeader;
解决方法
如果您希望Question
连接QuestionHeader
和PosterGrid
,然后将PosterGrid
放在Question
内,分别使用它有什么意义? / p>
type QuestionProps = {
question: string
moviePosters: PosterTypeYouHave[]
}
const Question = ({ question,moviePosters}: QuestionProps) => {
// ...
return (
<div /* ... */>
<QuestionHeader question={question} />
{/* You wrote {PosterGrid} here which is not correct */}
<div><PosterGrid moviePosters={moviePosters} /></div>
</div>
)
}
然后使用它
<Question question={'whatever'} moviePosters={[/* ... */]} />
如果这不是您想要的,对我来说不是很清楚,什么可以随时澄清您的意图,我将更新答案。您还可以使Question
创建具有某些值的上下文,并使QuestionHeader
和PosterGrid
从此上下文中获取值,但我不明白为什么需要它,这似乎是一个在您遇到的一个非常简单的情况下过度复杂化
// HomePageProps.jsx
const HomePage = (props: HomePageProps): JSX.Element => {
const { theme } = props;
const moviePosters = [
{
posterUrl: 'https://images-na.ssl-images-amazon.com/images/I/61rv%2BRnsu6L._AC_.jpg',title: 'Avenger',videoUrl: '',description: 'Avenger',actors: ['Thor','Bob','Joe'],}]
const question = '....'
...
return (
return (
<div style={styles.container}>
<Header theme={theme} />
<Question
question={question}
moviePosters={moviePosters}
// your `QuestionHeader` and `PosterGrid` needed props
/>
</div>
)
}
// Question.jsx
interface QuestionProps {
question: string;
moviePosters: moviePostersType[]
}
const Question = (props: QuestionProps): JSX.Element => {
const {moviePosters,question } = props
return (
<div style={styles.container}>
<QuestionHeader question={question}/>
<PosterGrid moviePosters={moviePosters} />
</div>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。