react框架下的这个props哪里来的

img


有人知道这个props是哪里来的吗,没有引入也没有继承,突然出现了一个props

在React中,每一个组件都有一个props属性,这是一个JavaScript对象,包含了组件被调用时传递进来的所有属性。props的来源通常是父组件传递进来的。

例如,下面的代码中,我们定义了一个名为MyComponent的组件,它接收一个名为name的属性。

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}


当我们在另一个组件中使用MyComponent组件时,我们可以将name属性传递给它:

function App() {
  return <MyComponent name="Alice" />;
}


在这个例子中,当MyComponent被渲染时,props对象将包含一个name属性,它的值为"Alice"。在MyComponent组件中,我们可以使用props.name来访问这个属性的值。

如果组件没有接收任何属性,那么它的props对象将是一个空对象。如果组件没有被传递任何属性,那么它的props对象中也不会有任何属性。

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7519139
  • 我还给你找了一篇非常好的博客,你可以看看是否有帮助,链接:react设置props的默认值
  • 除此之外, 这篇博客: react从入门到入魔中的 批量传递props 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    如果我们要将一个对象的全部属性传递给子组件

    class SonComponent extends React.Component {
                render() {
                    console.log(this.props)
                    return 1
                }
            }
            class ComponentDemo extends React.Component {
                state = {
                    name:'张三',
                    age:13,
                    job:'无',
                    hobby:'无'
                }
                render() {
                    return (
                        <div>
                            <SonComponent data={this.state} ></SonComponent>
                        </div>
                    )
                }
            }
            ReactDOM.render(<ComponentDemo />, document.getElementById('app'))
    

    但是此时控制台会输出两层结构
    在这里插入图片描述
    但是我想直接在props的第一级结构中拿到数据就要这样写

    	<SonComponent name={this.state.name} age={this.state.age} job={this.state.job} hobby={this.state.hobby} ></SonComponent>
    

    如果数据量更多,写法就颇为麻烦,这里介绍一种props的批量写法

    	<SonComponent {...this.state} ></SonComponent>
    

    子组件控制台正常打印
    在这里插入图片描述

  • 您还可以看一下 李秀忠老师的React.js框架技术课程中的 24-组件props_子组件与父组件通信小节, 巩固相关知识点

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^