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

【问题标题】：How to print the props value in console.log?如何在 console.log 中打印 props 值？
【发布时间】：2021-12-04 22:27:44
【问题描述】：

我是新手，我正在做一个简单的项目，因为我的代码如下我刚刚注意到如何打印 listItem={people} 的值，因为它作为道具传递在我的列表组件中，即

    *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;

【问题讨论】：

console.log(props.listItem) in List 组件，请参考 react docs

标签： javascript html css reactjs

【解决方案1】：

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

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

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

Here你可以找到更多关于解构的信息。

【讨论】：

是的，我知道一旦作为道具收到后如何解构它们，但我很好奇有没有办法在下方打印为 {console. log(people)} 打印人员，但是当我尝试打印时 {console.log(listItem) 它给了我错误 idk 为什么
就像你在App Component中做{console.log(people)}一样，你可以在List Component中做{console.log(listIem)}，你不能在App中使用listItem，但我不明白你为什么不能登录people 变量，并且您希望它准确命名为 listItem。

【解决方案2】：

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

console.log(props.listItem)

请参考React Docs

【讨论】：