道具没有在反应中传递子组件

Question

I am learning react. I am trying to pass props to the component. However, it seems like the props are not received correctly by the child.

My App Class is like,

import React from 'react'
import ImageList from './ImageList'


class App extends React.Component{
    state = { images: [] }

    render = () => {
        return(
            <div className="ui container">
                <ImageList images={this.state.images}/>
            </div>
        )
    }
}

export default App

And my ImageList Class is like

import React from 'react'

class ImageList extends React.Component{
    render = (props) => {
        console.log(props)
        return(
            <div>
                test
            </div>
        )
    }
}

export default ImageList

As you can see I am passing <ImageList images={this.state.images}/> from App. This should pass the images state which is an empty array right now. However, console.log(props) of ImageList is showing undefined but I expect to see an empty array somewhere there(props.images).

Answer 1

In a class component, render doesn't take a props argument. You reference it with this.props instead.

Answer 2

In a class component, render doesn't take a props argument. You can try to access props like this in the class component.

import React from 'react'

class ImageList extends React.Component{
    render () {
        console.log(this.props)
        return(
            <div>
                test
            </div>
        )
    }
}

export default ImageList