React Props 没有传递给子组件？

Question

我正在努力学习 React，所以请多多包涵！

我正在学习帮助我理解 React 以及如何传递组件的教程。

我试图将道具向下传递 2 个级别，但是当我在第三个元素上呈现代码时，页面上没有显示任何内容。在 chrome 上使用 React Dev 工具，似乎道具正在 Tweets.js 组件而不是 Tweet.js 组件上加载。

谁能告诉我怎么了？顺序是 App.js > Tweets.js > Tweet.js

作为参考，我正在学习以下教程，大约在 15 分钟左右。 React 状态和道具 |为初学者学习 React 第 4 部分

App.js

import './App.css';
import Tweets from './components/Tweets';

import React from 'react';

function App() {
    const name=["Name1", "Name2", "Name3"];
    const age=["21", "22", "24"]; /* Data is created here */

    return ( 
        <div className="App">
            <Tweets me={name} age={age} />{/*Data is added to component*/ }  
        </div>
        
    );
}
export default App;

Tweets.js

import Tweet from './Tweet';

const Tweets = (props) => (
    <section>
        <Tweet /> 
    </section>
);



export default Tweets;

Tweet.js


const Tweet = (props) => (
    <div>
        <h1>{props.me}</h1>
        <h1>{props.age}</h1>
    </div>
);



export default Tweet;

Answer 1

您需要通过 Tweets 组件传输道具：

const Tweets = (props) => (
    <section>
        <Tweet {...props} /> 
    </section>
);

React Props 没有传递给子组件？

React Props not passing down to children components?

javascript

reactjs

react-dom