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(...，则无法获得道具。这意味着我无法放置<Post params={ params }... </Post>。

问题：如何将此params数组传递到我的<Post />组件中并且data数组被映射？

如果你想知道： - 数组中有数据 - 从父组件传递成功 - Post.js文件成功完成了我的需要 - 我是新来的反应犹太人 - 我可以把更多的文件放入，只要问谢谢！

修改添加了Post.js文件它会在帖子消息中查找{{company}}，并将其替换为字符串＆＃39; company＆＃39;

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

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

E.g;

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

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

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

1 个答案: