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

Question

所以我刚刚开始学习 React 并且到目前为止它很有趣，但是我正在尝试将我的组件分成多个部分以获得更清晰更漂亮的代码。

这是我的组件-

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;

但是，如果我想将以下 oof 代码放入新的 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>

我如何将所有道具传递到新的 class 中？ 如果这是一个基本的初学者问题，我很抱歉。

感谢所有的帮助和支持

Answer 1

您可以非常轻松地将道具传递给子组件。

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

除了新的 class 组件之外，您可以将它们访问为

this.props.userDetails

Answer 2

其实很简单。 你只是做

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>
        );
    }
}

并在父项中执行<AuthComponent items={items} />