Storybook React 及其示例组件不起作用

Question

I'm currently following this: https://storybook.js.org/basics/writing-stories/

And I created an example component button:

import React from 'react';

const Button = props => {
    return (
        <button>
           Hello
        </button>
    );
};

export default Button;

However, I'm not exactly sure what is going on under the hood in Storybook that this ends up creating the stories in the left navigation area, but the story examples that get rendered in my build are in fact my default Hello button.

Answer 1

Are you mentioning, that when you fire up storybook, you just see your button with “hello” text and not any of the prop value that you are passing into it?

If so, you must use the prop within the button definition as mentioned in the above answer.

If its some other issue, please provide more info on it.

Answer 2

First of all That's not how you use props.

import React from 'react';

const Button = () => {
    return (
        <button>
           Hello
        </button>
    );
};

export default Button;

This will work. And if you wanna use props do like this.

import React from 'react';

const Button = (props) => {
    return (
        <button>
           {this.props.yourPropName}     
        </button>
    );
};

export default Button;

this.props.yourPropName will show what you send using props.