javascript - React JS - 如何将不同的 Prop 传递到其他 Prop 的映射中

Question

问题:我怎样才能通过这个params数组到我的 <Post />组件具有 data数组被映射？ 我的州有两个数组。 this.state = { data: [], params: [] };我通过 props 将它们传递到名为 PostList.js 的文件中。它在 map 函数中渲染每个帖子(来自数据数组)，如下所示:

//PostList.js
//.....Removed for brevity....
render(){
    // Tried let params = this.props.params; HERE
    let socialPostNodes = this.props.data.map(socialPost => {
        // Tried let params = this.props.params; HERE
        return (
            <Post
                //I need params = { this.props.params } HERE
                messageNumber = { socialPost.message.indexOf('', 1) }
                message={ socialPost.message}
                uniqueID={ socialPost['_id'] }
                key={ socialPost['_id'] } >
                { socialPost.message }
            </Post>
        )
    });
//.....removed for brevity......

我需要输入 this.props.params进入<Post />所以我可以在 Post.js 文件中引用它们，但我不知道如何并且找不到答案。

如果我尝试添加 let params = this.props.params;之后render()甚至早于return(... ， Prop 没有获得。这意味着我不能输入 <Post params={ params }... </Post> 。

问题:我怎样才能通过这个params数组到我的 <Post />组件具有 data数组被映射？

如果您想知道: - 数组中有数据 - 从父组件向下传递成功 - Post.js 文件成功地满足了我的需要 - 我是reactJS新手 - 我可以放入更多文件，请询问 谢谢!

编辑 添加了 Post.js 文件 它在帖子消息中查找 {{company}} 并将其替换为字符串“company”

class Post extends Component {
    loadInParams() {
        let socialMessage = this.props.message;
        if (socialMessage.indexOf("{{company}}") >= 0) {
            let newSocialMessage = socialMessage.replace("{{company}}", 'company')
            return newSocialMessage
        } else {
            let newSocialMessage = socialMessage;
            return newSocialMessage
        }
    }

    render() {
        return (
            <div>
                <h4> Post { this.props.messageNumber } </h4>
                <strong>Post Template: </strong> { this.props.message }
                <br />
                <strong>Ready Post: </strong>
                { this.loadInParams() }
            </div>
        )
    }
}

Answer 1

当您输入map时，this范围就会丢失!但是 map 函数允许您提供第二个参数来提供 this 上下文。

例如；

this.props.data.map(socialPost => {
    ...
}, this);

传入第二个参数将允许您访问父作用域的 this，这意味着 this.props.params 现在将具有值。