如何在 React 中将映射变量从父级传递给子级

Question

So I have just started learning React and its been fun so far, however I'm trying to split my components into sections for cleaner prettier code.

This is my component -

class Papers extends React.Component {
       // Constructor 
       constructor(props) {
        super(props);
   
        this.state = {
            items: [],
            DataisLoaded: false
        };
    }
   
    // ComponentDidMount is used to execute the code 
    componentDidMount() {


        const randomFilmId = Math.floor(Math.random() * 10) + 1

        const url ="#"
        fetch(url)

            .then((res) =>  res.json())

            .then((json) => {


                this.setState({
                    items:json,
                    DataisLoaded: true
        
                });
            })

            .catch ((err) => { 
                console.log("something went wrong ", err) 
            });
    }
    render() {
        const { DataisLoaded, items } = this.state;
        if (!DataisLoaded) return <div>
            <h1> Pleses wait some time.... </h1> </div> ;
   
        return (
            <div className="auth-box">
            <div className="auth-card" key="{item.id}">
            <div className = "App">
                <h1> Fetch data from an api in react </h1>  {
                    items.map((item) => ( 
                <ul key = { item.id } >
                     <li>  User_Name: { item.first_name }, </li>
                     <li>     Full_Name: { item.middle_name },  </li>
                     <li>  User_Email: { item.last_name } </li>
                        </ul>
                    ))
                }
           </div>
           </div>
           </div>
    );
}
}



export default Papers;

But if I want to put the following piece oof code in a new class,

 <div className="auth-box">
        <div className="auth-card" key="{item.id}">
        <div className = "App">
            <h1> Fetch data from an api in react </h1>  {
                items.map((item) => ( 
            <ul key = { item.id } >
                 <li>  User_Name: { item.first_name }, </li>
                 <li>     Full_Name: { item.middle_name },  </li>
                 <li>  User_Email: { item.last_name } </li>
                    </ul>
                ))
            }
       </div>
       </div>
       </div>

How would I pass all the props into the new class? I'm sorry if this a basic beginner question.

Appreciate all the help and support

Answer 1

You can pass down props to child components very easily.

<Auth userDetails={this.state.items} />

And iside the new class component you can access them as

this.props.userDetails

Answer 2

It is pretty simple actully. You just do

class AuthComponent extends React.Component {
    render () {
        return (
            <div className="auth-box">
                <div className="auth-card" key="{item.id}">
                    <div className = "App">
                        <h1> Fetch data from an api in react </h1>
                        {
                            this.props.items.map((item) => ( 
                                <ul key = { item.id } >
                                    <li>  User_Name: { item.first_name },</li>
                                    <li>     Full_Name: { item.middle_name },  </li>
                                    <li>  User_Email: { item.last_name } </li>
                                </ul>
                            ))
                        }
                    </div>
                </div>
            </div>
        );
    }
}

and in parent do <AuthComponent items={items} />