1

我是 React 新手，正在使用库：Semantic-UI-React。

我正在尝试使用 Semantic-UI-React 中的 Dropdown 组件，但我无法传递我的道具。当我 console.log 在示例代码中的任何位置记录我的道具时，我得到一个错误。

Semantic-UI-React 下拉示例看起来与我的正常反应代码不同。它只有一个出口。我的普通代码有一个渲染和一个返回部分。

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

我的父页面得到这样的孩子：

<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

我不知道是否可以重写示例中的代码，使其看起来更像我的其余代码。

4

1 回答 1

1

目前尚不清楚您要达到的目标。我会假设有一个TagFilterComponent并且你想在Dropdown其中渲染组件。

我建议你创建一个自己的组件，我们称之为TagDropdown. 你把你想要的道具传递给它，然后添加你需要的功能。然后对于它的render-function - 您可以根据DropDown需要使用组件。通过您提供的代码

也就是说，您通过 composition 扩展 DropDown。

就像是：

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可以渲染 a<TagDropdown>并且您可以传递您选择的道具。

于 2016-12-20T14:08:37.130 回答