如何在语义 UI 反应中将状态传递给选项卡呈现方法?

Question

我正在使用 SUIR 的 Tab。 我正在尝试将一些状态数据传递到其中一个"窗格"中，并使用<Dropdown>模块来呈现该状态数据。我需要通过道具还是其他东西传承下来？

我想呈现一个特定于Tab 2的下拉列表。我真的只是想知道如何将状态数据传递给窗格的呈现方法。我在想也许将渲染方法移出panes = [{},{},{}]并将其放在Apprender()中。我不确定这里的最佳方法。

以下代码的代码沙箱。

const panes = [
{ menuItem: "Tab 1", render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
{ menuItem: "Tab 2", render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
{ menuItem: "Tab 3", render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> }
];
const MockAdapter = require("axios-mock-adapter");
const mock = new MockAdapter(axios);
mock.onGet("/dataschemas").reply(200, {
data: [
{
id: "2",
selfUri: "/dataschemas/2",
type: "DataSchema",
name: "Book Catalog"
},
{
id: "3",
selfUri: "/dataschemas/3",
type: "DataSchema",
name: "Business Articles"
}
]
});
class App extends Component {
constructor(props) {
super(props);
this.state = { activeIndex: 1, dataschemas: [], dataSchemaName: "" };
}
handleRangeChange = e => this.setState({ activeIndex: e.target.value });
handleTabChange = (e, { activeIndex }) => this.setState({ activeIndex });
async componentDidMount() {
await this.getSchemas();
}
getSchemas = async () => {
try {
const { data } = await axios.get("/dataschemas");
console.log(data);
const dataschemas = data.data;
this.setState({ dataschemas: dataschemas });
console.log("This is the dataschema list:", dataschemas);
} catch (error) {
console.error(Error(`Error fetching results list: ${error.message}`));
}
};
handleSchemaChange = e => {
//handle data schema dropdown change
};
// Example of dropdown using dataschemas state
render() {
const { activeIndex, dataschemas, dataSchemaName } = this.state;
return (
<div>
<div>activeIndex: {activeIndex}</div>
<input
type="range"
max="2"
value={activeIndex}
onChange={this.handleRangeChange}
/>
<Tab
panes={panes}
activeIndex={activeIndex}
onTabChange={this.handleTabChange}
/>
<Dropdown
placeholder="Select data schema"
scrolling
clearable
fluid
selection
search
noResultsMessage="Try a different Search"
multiple={false}
options={dataschemas.map(schema => {
return {
key: schema.id,
text: schema.name,
value: schema.name
};
})}
header="PLEASE SELECT A DATASCHEMA"
value={dataSchemaName}
onChange={this.handleSchemaChange}
required
/>
</div>
);
}
}

Answer 1

例如，我可以想到以下解决方案：

1. 查看您的布局，我认为没有必要将状态传递给窗格渲染方法，因为您Dropdown组件之外。因此，您可以根据activeIndex值定义Dropdown选项。

2. 如果您想在选项卡内容内移动Dropdown组件(嗯，这是有道理的)，那么您可以

   • 为每个选项卡内容创建单独的组件(TabContent1、TabContent2等 - 当然可以找出更合适的名称)，然后按照您的建议在render()内部创建panes：

     const panes = [
     { menuItem: "Tab 1", render: () => <TabContent1 {/* can pass props here */} /> },
     { menuItem: "Tab 2", render: () => <TabContent2 /> },
     { menuItem: "Tab 3", render: () => <TabContent3 /> }
     ]
     

     如果你愿意，你还可以将一些道具传递给那里的那些组件。 现在，如果选项卡内容的内容非常相似，您可以创建一个 通用TabContent组件，只需传递到那里的道具就会有所不同，就像dropdownOptions={...}

   • 与上一个示例相同，但不是创建新组件(如果您认为这太麻烦了)，只需创建一个单独的renderTabContent()方法，并在render()中创建panes，如下所示：

     const panes = [
     { menuItem: "Tab 1", render: () => this.renderTabContent(
     /* can pass something here as well */
     )},
     { menuItem: "Tab 2", render: () => this.renderTabContent() },
     { menuItem: "Tab 3", render: () => this.renderTabContent() }
     ]
     

     同样，您可以将某些内容传递给此方法，例如dropdownOptions，以使每个方法返回不同的内容。或者，您可以为每个选项卡内容创建不同的renderTabContent1，renderTabContent2等。在这些方法中，您可以轻松访问this.state

这是一个具有 #2 解决方案的 CodeSandbox 示例。我只创建了一个Tab2Content组件，但我相信您将能够接受这个想法并实现其他组件 👍