如何在单个组件中渲染多个道具，然后将这些道具传递给 React 中的子组件

Question

我试图在单个组件中渲染多个道具，这两个道具都来自不同的 api，它们一起工作，问题是我想 map 单个组件中的道具以显示帖子列表。 有人说我通过在我的组件中创建一个变量（数组）来做到这一点。 然后，将属性（道具）传播到变量中，例如 myVariable.push(...posts, ...externalPosts)。 但是我似乎无法弄清楚如何实现组件渲染另一个子组件的结果，该子组件调用我想传递道具。

应用程序.js

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Posts } from './components';



const App = () => {
  const [ posts, setPosts ] = useState([]);
  const [ postsExternal, setPostsExternal ] = useState([]);

  const fetchPostsAll = () => {
    axios.get(`http://localhost:2000/posts`).then(({ data }) => {
      let externalPosts = [];
      setPosts(data);
      console.log(data);
      data.map(({ external_id }) => {
        axios
          .get(`http://localhost:2000/posts${external_id}`)
          .then(({ data }) => {
            console.log(data);
            externalPosts.push(data);
          });
        setPostsExternal(externalPosts);
      });
    });
  }

 
  useEffect(() => {
    fetchPostsAll();
  }, []);
  
  return (
    <div>
      <Navbar/>
      <Posts posts={posts} postsExternal={postsExternal} />
    </div>
  );
};

export default App;

Posts.js

import React from 'react';
import Post from './Post/Post';

const Posts = ({ posts, postsExternal }) => {
    return (
        <main>
            <Container fluid>
                <Row className="p-2">
                    { posts.map((post) => (
                        <Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}>
                            <Post post={post} postExternal={postsExternal}/>
                        </Col>
                    ))}
                </Row>
            </Container>
        </main>
    );
};

export default Posts;

Post.js

import React from 'react';

const Post = ({ post, postExternal }) => {
    return (
        <Figure>
            <span>{post.title}</span>
            <span>{postExternal.rating}</span>
        </Figure>
    )
}

export default Post;

问题在于 Posts.js 文件，而我想映射到 map 两个道具并将这些单项道具传递给 Post.js

Answer 1

您只是不破坏道具并按原样传递。

import React from 'react';
import Post from './Post/Post';

const Posts = (props) => {
    const { posts } = props;
    return (
        <main>
            <Container fluid>
                <Row className="p-2">
                    { posts.map((post) => (
                        <Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}>
                            <Post {...props} post={post}/>
                        </Col>
                    ))}
                </Row>
            </Container>
        </main>
    );
};

export default Posts;

您可以在 App.js 中执行此操作

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Posts } from './components';

const App = () => {
  const [ posts, setPosts ] = useState([]);
  const [ postsExternal, setPostsExternal ] = useState([]);

  const fetchPostsAll = () => {
    axios.get(`http://localhost:2000/posts`).then(({ data }) => {
      let externalPosts = [];
      setPosts(data);
      console.log(data);
      data.map(({ external_id }) => {
        axios
          .get(`http://localhost:2000/posts${external_id}`)
          .then(({ data }) => {
            console.log(data);
            externalPosts.push(data);
          });
        setPostsExternal(externalPosts);
      });
    });
  }

 
  useEffect(() => {
    fetchPostsAll();
  }, []);

  const props = { posts, postsExternal };
  
  return (
    <div>
      <Navbar/>
      <Posts {...props} />
    </div>
  );
};

export default App;

Answer 2

做：

import React from 'react';
import Post from './Post/Post';

const Posts = ({ posts, postsExternal }) => {
    return (
        <main>
            <Container fluid>
                <Row className="p-2">
                    { posts.map((post, index) => (
                        <Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}>
                            <Post post={post} postExternal={postsExternal[index]}/>
                        </Col>
                    ))}
                </Row>
            </Container>
        </main>
    );
};

export default Posts;