React JS - 如何将不同的道具传递到其他道具的地图中答案

【问题标题】：React JS - How to pass different props into a map of other propsReact JS - 如何将不同的道具传递到其他道具的地图中
【发布时间】：2018-02-19 23:46:08
【问题描述】：

问题：如何将这个 params 数组传递到我的 <Post /> 组件中，并映射 data 数组？ 我的州有两个数组。 this.state = { data: [], params: [] }; 我通过 props 将它们传递到一个名为 PostList.js 的文件中。它在地图函数中呈现每个帖子（来自数据数组），见下文：

//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 文件中引用它们，但我不知道如何也找不到答案。

如果我尝试在 render() 之后甚至在 return(... 之前添加 let params = this.props.params; ，则不会获得道具。这意味着我不能输入<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>
        )
    }
}

【问题讨论】：

@kevin-danikowski 我想我们很困惑。你能告诉我你通过this.state.data和this.state.params的部分吗？它应该在您的 Parent 组件中，该组件正在导入从 Postlist.js 导出的组件。
@keshavDulalgravityplanx 能够解决它，我这样传递它： ... .. .
是的……没错。这就是我想要确定的。无论如何。

标签： javascript arrays reactjs components

【解决方案1】：

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

例如;

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

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

【讨论】：