How to design component layout reasonable in React?

Question

I have two options in below. What should I choose?

Option 1:

in Header.jsx:

<div>
    <Logo />
    <Menu>
        <MenuItem> homepage </MenuItem>
        <MenuItem> contact </MenuItem>
    </Menu>
</div>

Option 2:

- in Header.jsx

<div>
    <Logo />
    <Menu />
</div>

- in Menu.jsx

<ul>
    <MenuItem> homepage </MenuItem>
    <MenuItem> contact </MenuItem>
<ul>

I don't know the strength or weakness of each option. tks all pro.

If I were u, i 'll choose 2.option, because you can later easier fix your error. — Voi Mập
– Voi Mập, Commented Jul 22, 2017 at 12:13
I will go opt 2, because MenuItem is part of Menu, so it should stay encapsuled in the Menu component. Header component should not care about MenuItem's — soywod
– soywod, Commented Jul 22, 2017 at 12:15

Vikram Saini · Accepted Answer · 2017-07-22 12:27:56Z

1

Approach should be like think of the most modular structure so that all the components are independent of each other.And in future if you want to add a functionality then other components should remain untouched.So Approach2 is better.But everything relies on your problem statement and architecture so you need to take care of all the scenarios that might irritate you in future

answered Jul 22, 2017 at 12:27

Vikram Saini

2,7521 gold badge21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Philipp · Accepted Answer · 2017-07-22 13:31:32Z

1

If you, somewhere in your app, are using another menu it would make sense to split it. So you can reuse the components of your menu.

In a simple scenario like this you can go with the first option [1]. There is little use to split the elements into components when there simply is nothing you will do with them later. Also this piece of code is small enough to refacor later, when there is actual need to use separate components.

[1] means: I would not be surprised or annoyed when I see this piece of code. The best practices way would be to put Menu and MenuItem into own components.

answered Jul 22, 2017 at 13:31

Philipp

2,7962 gold badges27 silver badges28 bronze badges

Comments

Madura Pradeep · Accepted Answer · 2017-07-22 14:50:21Z

1

Following is an official tutorial about how you should break your components.

https://facebook.github.io/react/docs/thinking-in-react.html

According to that, the component should break based on their responsibilities. They talk about single responsibility principle, that is, a component should ideally only do one thing.

Recommend to follow that.

According to that the responsibility of your menu is different. So you better make it as an another component.

edited Jul 22, 2017 at 14:50

answered Jul 22, 2017 at 14:16

Madura Pradeep

2,4641 gold badge32 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to design component layout reasonable in React?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related