Question

在我的react应用程序中单击某个div时，我绑定了一些文本值。现在我遇到了使用props将这些文本值传递给另一个组件的问题。

我的代码看起来像这样

class PostOptionBar extends Component {

    constructor() {
        super();

        this.state = {

            postType: 'text',

        }

    }

    textType(postType) {

        this.setState({postType});

    }

    render() {

        return (

            <div className="post_type_selection_div">

                <div className="post_type_btn">

                    <div className="horiz_center" onClick={this.textType.bind(this,'text')}>
                        <img src={StarIcon} className="post_type_icon"/>
                        <a className="post_type_text">Text</a>
                    </div>

                </div>


                <div className="post_type_btn" onClick={this.textType.bind(this,'imageVote')}>

                    <div className="horiz_center">
                        <img src={StarIcon} className="post_type_icon"/>
                        <a className="post_type_text">Image poll</a>
                    </div>

                </div>

                <div className="post_type_btn" onClick={this.textType.bind(this,'poll')}>

                    <div className="horiz_center">
                        <img src={StarIcon} className="post_type_icon"/>
                        <a className="post_type_text">Text poll</a>
                    </div>

                </div>


            </div>

        );
    }
}

export default PostOptionBar;

我可以在这个类中成功绑定值。如果我记录postType我可以清楚地看到。但我想将postType传递给另一个组件。我在我的其他组件中加载PostOptionBar。

 <div className="polaroid">
   <PostOptionBar/>
 <div>

我正在尝试在我的第二个组件中执行类似的操作。但是因为我无法将postType从第一个组件传递到第二个组件，所以我无法执行此操作。

    renderTab() {

        switch (this.state.postType) {
            case 'text':
                return <TextPost/>
            case 'imageVote':
                return <ImageVote/>
            case 'poll':
                return <TextVotePost/>

        }
    }

Answer 1

要解决该问题，您需要通过state的父组件管理PostOptionBar，然后将值传递给PostOptionBar和其他组件。还将函数传递给PostOptionBar组件以更新父组件的状态。

PostOptionBar的父组件：

<div className="polaroid">
    <PostOptionBar postType = {this.state.postType} changeType = {this.changeType}/>
<div>

changeType = (postType) => {
   this.setState({postType})
}

在PostOptionBar内使用道具价值this.props.postType：

class PostOptionBar extends Component {

    textType(postType) {
        this.props.changeType(postType);  // call the parent component to update the state
    }

    render() {
        return (
            ...
        );
    }
}

Answer 2

使用

设置状态

<Component2 postType={this.state.postType}/>

并使用

在component2中获取

this.props.postType

使用reactjs

2 个答案: