Question

我是React的新手，我正在使用Semantic-ui-react。我正在尝试使用Semantic-ui-react的Dropdown，但我不能通过må道具。当我在示例代码中的任何地方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

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

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>，您可以传递您选择的道具。

反应和语义 - 反应

1 个答案: