Storybook: تخفيض إضافة المعلومات مع رمز مضمّن (backtick `) معطل

تم إنشاؤها على ١٥ أغسطس ٢٠١٧ · 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 مضمّن في backticks.

الناتج المتوقع

تظهر الكلمة propTypes بخط أحادي المسافة ، جنبًا إلى جنب مع الجملة التي تنتمي إليها.

الإخراج الحالي

تصبح الكلمة propTypes عنصر <pre><code></code></pre> فارغًا ، كما هو موضح أدناه.

Screenshot

السبب المشتبه به

المكون الافتراضي لـ backtick هو <Code> ، والذي يتم تنفيذه كـ <code> داخل <pre> ، وهو عنصر كتلة يقسم الجملة إلى جزأين.
<Code> النص من this.props.code ، لكن النص الفعلي هو this.props.children .

info bug

مصدر

MrOrz

التعليق الأكثر فائدة

يبدو أن code مستخدم لكلٍ من أقسام الكود المضمنة والمكتوبة.
بالنسبة إلى التعليمات البرمجية المضمنة ، يجب أن يتم عرض props.children ولكن لمقطع الكود props.code

UsulPro في ٢٠ أغسطس ٢٠١٧

👍2

ال 3 كومينتر

MrOrz لقد واجهت هذه المشكلة أيضًا

شكرا للمساعدة!

UsulPro في ١٥ أغسطس ٢٠١٧

🎉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 في ٢٠ أغسطس ٢٠١٧