反应：在根文件中对包含两个其他组件的组件使用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>
  );
};