Storybook: 带有内联代码（反引号`）的信息插件降价已损坏

创建于 2017-08-15 · 3评论 · 资料来源: storybookjs/storybook

版本

@storybook/react v3.2.4
@storybook/addon-info v3.2.4

示例输入

官方示例中的这个条目

storiesOf('Button').addWithInfo(
  'simple usage (custom propTables)',
  `
      This is the basic usage with the button with providing a label to show the text.
      Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
      So, we need to give relevant React component classes manually using \`propTypes\` option as shown below:
      ~~~js
      storiesOf('Button')
        .addWithInfo(
          'simple usage (custom propTables)',
          <info>,
          <storyFn>,
          { inline: true, propTables: [Button]}
        );
      ~~~
    `,
  () => (
    <div>
      <Button label="The Button" onClick={action('onClick')} />
      <br />
    </div>
  ),
  { inline: true, propTables: [Button] }
);

注意propTypes用反引号括起来。

预期输出

单词propTypes以等宽字体与其所属的句子一起显示。

电流输出

单词propTypes变成了一个空的<pre><code></code></pre>元素，如下所示。

Screenshot

疑似原因

反引号的默认组件是<Code> ，它在<pre>实现为<code> <pre> ，这是一个将句子分成两部分的块元素。
<Code>呈现来自this.props.code的文本，但实际文本在this.props.children 。

info bug

资料来源

MrOrz

最有用的评论

看起来code用于内联和块代码部分。
对于内联代码，它应该呈现props.children但对于代码块props.code

UsulPro 于 2017-08-20

👍2

所有3条评论

@MrOrz我也遇到了这个问题，并将在此 PR #1501 中修复它

谢谢您的帮助！

UsulPro 于 2017-08-15

🎉1

听到这真是太好了！

我可以覆盖marksyConf来解决这个问题，所以不要急于公关，慢慢来;)

前任：


import React from 'react';
import { configure } from '@storybook/react';
import { setDefaults } from '@storybook/addon-info';

function Code({ children }) {
  return <code>{children}</code>;
}

function loadStories() {/* loading stories here */}

setDefaults({ marksyConf: { code: Code } });
configure(loadStories, module);

MrOrz 于 2017-08-20