如何在 console.log 中打印 props 值？

Question

我是新来的反应我正在处理简单的项目，因为我的代码在下面我只是注意到如何打印 listItem={people} 的值，因为它在我的列表组件中作为道具传递，即 <List listItem={people} 所以我可以更好地理解我在 listItem 中得到的内容，我尝试了 {console.log(listItem)} 但它说未定义

    *react*
   function App() {
  const [people, setPeople] = useState(data);


  return (
    <div className="container">
      <h3>{people.length} birthdays today</h3>
      <List listItem={people} />
      
      <button onClick={() => setPeople([])}>Clear All</button>

    </div>
  );
}

export default App;

Answer 1

您在组件函数中添加到组件的所有参数都将作为一个对象发送，该对象的键是您选择的参数名称和您为其设置的值。

在下面的例子中，我正在解构列表组件作为参数获取的对象。

function List({ listItem }) {
  console.log(listItem)
  
  return <div>List Component</div>
}

在这里你可以找到更多关于解构的信息。

Answer 2

您需要先检索道具，这可以使用以下代码完成。

console.log(props.listItem)

请参考React 文档