在 Semantic 中传递 props UI React 的下拉组件

Question

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

我正在尝试使用 Semantic-UI-React 中的 Dropdown 组件，但我无法传递我的道具。当我在示例代码中的任何地方 console.log 我的道具时出现错误。

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

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

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

Answer 1

不清楚您要实现的目标。我假设有一个 TagFilterComponent 并且您想在其中渲染 Dropdown 个组件。

我建议您创建一个自己的组件，我们称它为TagDropdown。你传递你想要的道具并添加你需要的功能。然后对于它的 render 功能 - 您可以根据需要使用 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> 并且您可以传递您选择的道具。

在 Semantic 中传递 props UI React 的下拉组件

Passing props in Semantic UI React's dropdown component

reactjs

semantic-ui

semantic-ui-react