Question

我创建了一个下拉菜单，并尝试将其传递给另一个组件：

var DropDownButton = React.createClass({
    getInitialState: function() {
        return {
            stage: 'Select'
        }
    },

    change: function(e){
        this.setState({
            stage: e.target.value
        });
    },

    render: function() {
        return (
            <div key={i}>
                <select  id='dropdown' onChange={this.change} value={this.state.value}>
                    <option value="Select">Select</option>
                    <option value="1">Option1 </option>
                    <option value="2">Option2 </option>
                </select>
            </div>
        )
    }
});

我正在尝试将此菜单传递到CreateCandidate：

return (
            <div>
                {pageHeaderInstance}
                <CreateCandidate addCandidate = {this.addCandidate} />
                <ShowTable people= {this.state.people} />
            </div>
        )

在CreateCandidate内部我创建了新对象，我希望将下拉菜单作为其中的一部分。

如何将整个组件传递到另一个组件？我在考虑这样的事情：

<CreateCandidate addCandidate = {this.addCandidate} dropdownmenu = { ..add dropdownButton component..}

Answer 1

您可以传递创建的jsx组件，就像

一样简单

<CreateCandidate addCandidate = {this.addCandidate} dropdownmenu = {<DropDownButton/>}

Answer 2

正确的方法是导入CreateCandidate组件中的组件，然后使用它而不是从父组件传递组件

像

一样导入它

import {DropDownButton} from '/path/to/DropDownButton';

并将其用作<DropDownButton/>

还要确保导出DropDownButton组件，如

module.exports = DropDownButton;

ReactJS：将组件作为属性传递

2 个答案: