我是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
我不知道是否可以重写示例中的代码,使其看起来更像我的其他代码。
现在还不清楚你想要实现什么。我假设有一个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组件可以呈现