Javascript 使用reactjs中的道具将值传递给其他组件

在react应用程序中单击某个div时，我正在绑定一些文本值。现在我面临一个问题，就是如何使用道具将这些文本值传递给另一个组件

我的代码如下所示

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

从我的第一个组件传递到第二个组件，所以我不能这样做

    renderTab() {

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

        }
    }

renderTab（）{
开关（this.state.postType）{
案例“文本”：
返回
案例“imageVote”：
返回
“民意测验”案例：
返回
}
}

使用

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

使用

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

---

要解决该问题，您需要通过

PostOptionBar

的父组件管理

状态

，然后将值传递给

PostOptionBar

和其他组件。还将函数传递给

PostOptionBar

组件，以更新父组件的状态

PostOptionBar的父组件

：

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

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

---

要解决该问题，您需要通过

PostOptionBar

的父组件管理

状态

，然后将值传递给

PostOptionBar

和其他组件。还将函数传递给

PostOptionBar

组件，以更新父组件的状态

PostOptionBar的父组件

：

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

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

---

不清楚，要在何处定义此方法

renderTab

？您想将postType传递到哪个组件？renderTab是我的第二个组件。但是我在第一个组件中设置了我的postType。要使renderTab工作，我需要在第二个组件中使用postType值。我同意@MayankShukla的说法，你的问题不清楚。但是如果你是这么想的话，那么传递道具是非常容易的，并且道具postType可以作为一个简单的工具在PostOptionBar组件中访问props@CraZyDroiD您正在一个位置或多个位置渲染

？仅在一个位置不清楚，您想在哪里定义此方法

renderTab

？您想将postType传递到哪个组件？renderTab是我的第二个组件。但是我在第一个组件中设置了我的postType。要使renderTab工作，我需要在第二个组件中使用postType值。我同意@MayankShukla的说法，你的问题不清楚。但是如果你是这么想的话，那么传递道具是非常容易的，并且道具postType可以作为一个简单的工具在PostOptionBar组件中访问props@CraZyDroiD您正在一个位置或多个位置渲染

？仅在一个位置我想知道的是，当onClick={this.textType.bind（this，'text'）}时，如何传递绑定的值到我的下一个组件。您的值文本绑定到posttype，因此this.state.posttype意味着您的文本被设置为state，当您使用this.props.posttype获取它时，它将为您提供posttype ie文本的值。给它一个tryAll我想知道的是，当onClick={this.textType.bind（this，'text'）}到我的下一个组件。您的值文本绑定到posttype，因此this.state.posttype意味着您的文本被设置为state，当您使用this.props.posttype获取它时，它将为您提供posttype ie文本的值。请尝试一下

class PostOptionBar extends Component {

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

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