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

【问题标题】：How do I pass a mapping variable from parent to child in React如何在 React 中将映射变量从父级传递给子级
【发布时间】：2022-01-12 08:05:02
【问题描述】：

所以我刚刚开始学习 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 代码放到一个新的类中，

 <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>

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

感谢所有帮助和支持

【问题讨论】：

您可以通过<NewComponent items={items} />传递它。然后在你的NewComponent 中，你可以遍历props.items

标签： javascript html reactjs

【解决方案1】：

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

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

除了新的类组件，您还可以访问它们

this.props.userDetails

【讨论】：

不应该是this.props.userDetails吗？
我现在修，谢谢指点

【解决方案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} />

【讨论】：

非常感谢，成功了，我想我现在也明白这背后的逻辑了，感谢您的宝贵时间和耐心。
太棒了，很高兴我能帮上忙。