return (
<div>
{this.props.buttons && this.props.buttons.tabs && this.props.buttons.tabs.length &&
this.props.buttons.tabs.map(button => {
return (
<TabsPanel label={button.labelKey}>
{button.subtabs.map(subtab => {
return (
<Tabs>
<TabsPanel label={subtab.labelKey} />
</Tabs>
);
})}
</TabsPanel>
);
})}
</div>
);
Попробуйте, это должно решить вашу проблему
Для моего собственного проекта это - то, как я разделил свои страницы. Был template.xsl файл, который был импортирован каждым из моих XSLs. Большинство страниц просто имело template.xsl, но некоторые страницы, такие как корзина, и т.д. нуждался в их собственном из-за другого вида данных, которые они анализировали.
<page title="Home">
<navigation>
<!-- something here -->
</navigation>
<main>
<!-- something here -->
</main>
</page>
Это - отрывок от моего template.xsl. Я добавил весь общий материал в здесь и затем дал возможность для моих страниц для добавления их собственной информации через call-template
.
<xsl:template match="/page" name="page">
<html>
<head>
<title><xsl:value-of select="(@title)" /></title>
<xsl:call-template name="css" />
<xsl:call-template name="script" />
</head>
<body>
<xsl:call-template name="container" />
</body>
</html>
</xsl:template>
Пример того, как мой тег CSS ответил бы. Обратите внимание, что это звонит css-extended.
CSS только имела общую CSS, которая будет применяться через все страницы. Некоторым страницам было нужно больше. Они могли переопределить расширенный до CSS. Обратите внимание, что это необходимо потому что call-template
перестанет работать, если страница назовет шаблон, но не определит его нигде.
<xsl:template name="css">
<link rel="stylesheet" type="text/css" href="{$cssPath}reset.css" />
<link rel="stylesheet" type="text/css" href="{$cssPath}style.css" />
<link rel="stylesheet" type="text/css" href="{$cssPath}layout.css" />
<xsl:call-template name="css-extended" />
</xsl:template>
<!-- This is meant to be blank. It gets overriden by implementing stylesheets -->
<xsl:template name="css-extended" />
Мой контейнер работал бы подобным образом - общий материал был определен, и затем каждая страница могла просто обеспечить реализацию. Реализация по умолчанию была в XSL. (в content
)
<xsl:template name="container">
<div id="container">
<xsl:call-template name="header" />
<xsl:call-template name="content" />
<xsl:call-template name="footer" />
</div>
</xsl:template>
<xsl:template name="content">
<div id="content">
<div id="content-inner">
<xsl:call-template name="sideBar" />
<xsl:call-template name="main" />
</div>
</div>
</xsl:template>
<xsl:template name="main">
<div id="main">
<xsl:apply-templates select="main" />
<xsl:call-template name="main-extended" />
</div>
</xsl:template>
<!-- This is meant to be blank. It gets overriden by implementing stylesheets -->
<xsl:template name="main-extended" />
<xsl:template name="footer">
<div id="footer">
<div id="footer-inner">
<!-- Footer content here -->
</div>
</div>
</xsl:template>
Это работало вполне красиво на меня. Если существуют какие-либо вопросы, я могу ответить за Вас, сообщить мне.
Шаблоны, включает.
Xsl очень отличается от любого другого языка программирования. Its rule based.
Я рекомендую Вам считать что-то о Xslt и затем спросить немного больше spedific.
Существуют и xsl, Включают и Операторы импорта, что можно использовать для краткого обзора далеко части страницы. Сам XSLT является очень видом вещи, которая может воспроизвести поведение типа файла тега. Вы редактируете свои файлы данных XML с тегами, которые Вы хотите. Между тем Ваши шаблоны xsl собираются знать то, что делает к с теми тегами затем, они встречаются с ними.
Можно дать шаблонные имена и затем назвать их через 'шаблон вызова'
В XSLT 2.0 можно создать собственные функции (хотя я нахожу синтаксис извилистым),
Замечательная область для исследования использует XSLT для генерации таблиц стилей XSLT. Это позволяет Вам автоматизировать общие сценарии преобразования, где 90% таблицы стилей являются шаблоном. Чтобы сделать это, необходимо познакомиться с 'псевдонимом пространства имен'. Это - отличный способ развернуть Ваш knowlege языка.
XSLT мощен, но это очень отличается от большинства языков программирования, и это вполне ограничено в том, что это делает доступным для Вас, таким образом, вещи, которые Вы имеете встроенный с другим языком, возможно, нуждаются в некотором довольно сложном xsl управлении для работы с. Я нашел cheatsheet отсюда полезным, когда я проходил большую работу XSLT несколько недель назад.
Не ожидайте, что XSLT сделает вещи конкретным способом, и, вероятно, можно найти хорошие способы сделать те вещи, но если у Вас есть слишком много идеи набора о том, как что-то должно работать, легко застрять.
XSL основан на шаблонной обработке.
Данные XML могут быть "снова использованы" на трех уровнях. На наиболее базовом уровне Вы можете <xsl:for-each />
через XML.
Примечание: Для - каждый в XSL не цикличное выполнение через данные, это просто соответствует данным. Также, когда Ваша "внутренняя часть" для - каждая Ваша внутренняя часть, что "контекст" XML (который похож на понятие "объема" в программировании),
Пример использования и многократного использования для - каждый
<xsl:for-each select="/xml/data/here">
... do some stuff ...
</xsl:for-each>
<xsl:for-each select="/xml/data/here">
... do some DIFFERENT stuff ...
</xsl:for-each>
Для - каждый узлы содержатся в шаблонных узлах (2-й уровень повторного использования). Существует два типа шаблонных узлов: Соответствие и Названный. Шаблонные узлы соответствия, действуйте как - каждый упомянутый выше узел, но автоматически названы движком шаблонов, если какие-либо узлы подобраны, когда обработка XSL запускается. Шаблонные узлы соответствия могут также быть явно применены. С другой стороны, узлы шаблона Named всегда явно применяются и могут думаться так же как функции.
Пример шаблона Match, который будут Всегда называть (потому что корневой узел будет всегда существовать),
<xsl:template match="/">
... do some stuff ...
</xsl:template>
Шаблон Match, называя другое соответствие обрабатывает по шаблону явно
<xsl:template match="/">
<xsl:apply-templates select="xml/data/too" />
</xsl:template>
<xsl:template match="xml/data/too">
... do something ...
</xsl:template>
Примечание: Для шаблона Match для работы Узел XML это соответствует потребностям существовать. Если это не делает там не идет ни в какое сравнение, так, чтобы шаблон не называли.
Пример шаблона Named
<xsl:template name="WriteOut">
... data with NO Context Here ...
</xsl:template>
Или вызов шаблона Named из шаблона Matched
<xsl:template match="/">
<xsl:call-template name="WriteOut" />
<xsl:template>
Примечание: Можно смешать и соответствовать, где Вы называете подобранные и названные шаблоны от, просто необходимо наблюдать, в каком контексте Вы находитесь.
Все шаблонные узлы сохранены в Таблицах стилей XSL, и можно включать и импортировать различные таблицы стилей. Например, можно держать все шаблоны, имеющие дело с узлами заголовка HTML в одном шаблоне и всех шаблонах, имеющих дело с узлами тела HTML в другом. Затем можно создать одну таблицу стилей, которая включает обе таблицы стилей Header и Body.
Пример включать узла
<xsl:include href="header.xsl" />
В заключении существует три пути к абстракции блоков данных, через для - eaching, посредством шаблонной обработки или посредством включения таблиц стилей.