ReactとSemantic-ui-react

Question

私はReactで新しく、Semantic-ui-reactを使っています。私はSemantic-ui-reactからドロップダウンを使用しようとしていますが、私は小道具を渡すことはできません。私はconsole.log私の小道具どこのサンプルコードでオンになっているときにエラーが発生します。ドロップダウンの例をセマンティック-UI-反応

はその後、私の通常のコードを反応させる切り抜い見えます。その唯一の輸出があります。私の通常のコードには、レンダリングセクションとリターンセクションがあります。

<div className="ui grid"> 
    <TagFilter handleTagChange={this.handleTagChange} tagsFilterValue={this.state.tagsFilterValue} /> 
</div> 

マイTagFilterコンポーネントは次のようになります：私は例のコードを書き換えることができるかどう

import React from 'react' 
import { Dropdown } from 'semantic-ui-react' 

import { friendOptions } from '../common' 

const DropdownExampleSelection =() => (
    <Dropdown placeholder='Select Friend' fluid selection options={friendOptions} /> 
) 

export default DropdownExampleSelection 

いけない知っている私の親ページが、このような子供が取得

http://react.semantic-ui.com/modules/dropdown

私のコードの残りの部分にもっと似ています。

Answer 1

あなたがachiveしようとしているかは明らかではありません。 TagFilterComponentがあると仮定し、Dropdownコンポーネントをレンダリングしたいとします。

私はあなたのはTagDropdownそれを呼びましょう、あなた自身のコンポーネントを作成することをおすすめします。これをあなたが望む小道具に渡し、必要な機能を追加します。次にrender -functionの場合は、DropDownコンポーネントを必要に応じて使用します。コードによって、あなたは、you extend the DropDown by compositionある

を提供します。

ような何か：今

/'''/ 
class TagDropdown extends React.Component { 
    constructor(props) { 
     super(props) 
    } 
    /* 
    Add your functions and handlers, if any.. 
    */ 
    render() { 
    return (
     <Dropdown /* <add your props and options> */ /> 
    ) 
    } 
} 

あなたTagFilterComponentが<TagDropdown>をレンダリングすることができますし、お好みの小道具を渡します。