提问者:小点点

在语义UI React的下拉组件中传递道具


我是React新手,正在使用库:语义UI React。

我正在尝试使用语义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

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


共1个答案

匿名用户

现在还不清楚你想要实现什么。我假设有一个TagFilterComponent,您希望在其中呈现下拉列表。

我建议您自己创建一个组件,我们称之为TagDropdown。你把你想要的道具传递给它,然后添加你需要的功能。然后,对于其渲染-功能,您可以根据需要使用下拉列表组件。根据您提供的代码

也就是说,您可以通过合成来扩展下拉列表。

比如:

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

现在您的tagfilter组件可以呈现