为什么我们应该在子组件中使用时将 props 写在花括号中

恶作剧

在 Person(Child Component) 函数中将 prop 作为参数传递时,为什么我们应该在花括号中编写 props?

应用程序.js

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

const App = () => {
  return (
  <div>
     <Person name={"John"} /> 
  </div>
);
}

export default App;

人物.js

import React from 'react';

const Person = ({name}) => {       //I am talking about this line
  return (
  <div>
     <h1/>My name is {name}.</h1>
  </div>
);
}

export default Person;
某些表演

如果要传递的字符串道具是静态的 - 就像这里一样 - 没有必要。

<Person name="John" /> 

会工作得很好。

{}只要要传递的值不是静态的,就需要s - 例如,当它来自变量时:

<Person name={nameFromState} /> 

{}在将任何内容插入 JSX(道具之外)时,您还需要s,如您在

<h1/>My name is {name}.</h1>

这条线

const Person = ({name}) => {

只是解构,相当于

const Person = (props) => {
  const { name } = props;

这相当于

const Person = (props) => {
  const name = props.name;

所有这些可能性都可以正常工作,但有些人更喜欢在参数列表中进行解构以使事情更简洁。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么我们应该在Angular中的map()上使用subscribe()?

逃脱props.children中的花括号

我们可以在花括号中执行表达式吗,我们可以在其中传递props值

什么时候在 React Native 中用花括号包围 props?

为什么我们不应该在 ComponentDidMount 中设置状态

为什么我们应该在Django中为MongoDB创建Model字段?

为什么我们应该在单独的DC中运行dse搜索

为什么我们在 React js 中定义常量变量时使用花括号?

我们应该在Vue 3中将mixins转换为基于类的组件定义语法吗?

我们应该在React Functional Components中的每个函数处理程序中使用useCallback吗

$ lookup在聚合猫鼬中,我们应该在foreignField中使用两个字段吗?

我们应该在哪种类型的括号内使用 $ 来扩展 bash 中的变量

什么时候我们应该在 android 中创建新的布局

我们什么时候应该在方法中抛出异常或捕获异常?

我无法在Eclipse中输入花括号

花括号在JavaScript中起什么作用?

哈希函数中的花括号是什么?

何时将花括号括在变量中

使用花括号从堆栈中删除分配

Xcode中的Storyboard参考,我们应该在哪里使用它?

我是否应该在花括号前跳行?

为什么花括号命令组在POSIX Shell语法中的左花括号之后需要空格?

组件的 props 在子组件中调用时返回 null

我应该在React中使用属性(除了props或state之外)吗?

为什么将Shell脚本括在花括号中?

我们可以在同一个 div 中使用 row 和 col-md-12 吗?还是应该在父子 div 中?

在数据编织中在何处使用花括号和花括号

为什么我们在react-native中使用ProgressViewIOS组件中的progressImage属性?

我们应该在表单操作 url_for 属性中传递什么参数指向烧瓶中的蓝图页面?