JS如何理解props参数作为对象在任何函数(react.js)?

Question

当我在学习react.js时，我注意到我写的任何函数，然后给它任何参数名称，javascript会理解这个参数为对象类型

像这样:

function Somthing(some){
    return (
        <div>
            Hello, friends{console.log(some)}
        </div> 
    ) 
}
export default Something;

那么console.log(some)将给我"Object{}"键入而不给它赋值任何对象

所以我的问题，我怎么能做这个概念在香草javascript和javascript如何理解它?

Answer 1

你可以考虑React props作为一个普通的函数形参，它是一个包含一些属性的对象。

在下一个例子中，我们看到react组件或jsx是普通的构造函数

function Greeting(props){
        return <h3>Hello {props.name}</h3>
}

当你像这样在应用或父组件中插入Greeting组件时:

function App (){
 return <Greeting name="Jack" />
}

Babel将代码编译成如下所示

function Greeting(props) {
  return React.createElement("h3", null, "Hello ", props.name);
}

和App Component被编译成如下内容

function App() {
      return React.createElement(Greeting, {
        name: "Jack"
      });
    }