React：在包含两个其他组件的组件的根文件中使用 props

Question

我正在尝试创建一个名为“Question”的组件，它将包含并连接另外两个名为“Question Header”和“PosterGrid”的组件（基本上是 collection 的电影卡片电影的 img 和名称，以及演员名单）。

因此，与其在根“index.tsx”文件中调用两个单独的组件，不如在问题Header 组件

中调用

但是，我不确定如何执行此操作，以及如何使用 props 来填充这些组件中的字段。我试着四处寻找，但我仍然一头雾水。

问题组件

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;

问题Header组件

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;

PosterGrid（只是它的相关部分）：

const PosterGrid = (props: PosterGridProps): JSX.Element => {
  const { moviePosters } = props;
  const [selected, setSelected] = useState<null | number>(null);
const moviePosterCardsTop = moviePosters
    .map((value, index) => (
      <PosterCard isSelected={index === selected} setSelected={() => setSelected(index)} moviePoster={value} />
    ))
    .slice(0, 3);
  const moviePosterCardsBottom = moviePosters
    .map((value, index) => (
      <PosterCard isSelected={index === selected} setSelected={() => setSelected(index)} moviePoster={value} />
    ))
    .slice(3);

  return (
    <div style={styles.container}>
      <div style={styles.topPosterCardsContainer}>{moviePosterCardsTop}</div>
      <div style={styles.bottomPosterCardsContainer}>{moviePosterCardsBottom}</div>
    </div>
  );

index.tsx根文件

interface HomePageProps {
  theme: Theme;
}

const HomePage = (props: HomePageProps): JSX.Element => {
  const { theme } = props;

  const styles: Styles = {
    container: {
      background: theme.BACKGROUND,
      height: '100%',
      width: '100%',
    },
  };

  return (
    <div style={styles.container}>
      <Header theme={theme} />
      
      {/*Calling in the two components seperately, how do I pass in the values for the props below, if I just call
        in the Question component that is supposed to connect the other two components together? */}

      <QuestionHeader question="Which movie do you like best?" />
      <PosterGrid
        moviePosters={[
          {
            posterUrl: 'https://images-na.ssl-images-amazon.com/images/I/61rv%2BRnsu6L._AC_.jpg',
            title: 'Avenger',
            videoUrl: '',
            description: 'Avenger',
            actors: ['Thor', 'Bob', 'Joe'],
          },

Answer 1

如果你想让你的Question连接QuestionHeader和PosterGrid，那么把PosterGrid放在Question里面，单独使用有什么意义？

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 从该上下文中获取值，但我不明白，为什么您需要它，这似乎是一个对于一个非常简单的场景来说过于复杂

Answer 2


// 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>
  );
};

React：在包含两个其他组件的组件的根文件中使用 props

React: Using props in a rootfile for a component that contains two other components

javascript

frontend

typescript

reactjs

react-functional-component