New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow replacing the anchoring element #2484

Closed
bazo opened this Issue Nov 7, 2014 · 4 comments

Comments

Projects
None yet
4 participants
@bazo

bazo commented Nov 7, 2014

i have the following html, using bootstrap3 and some theme

<ul class="nav navbar-top-links navbar-right">
    <li class="dropdown">
        <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
            <i class="fa fa-envelope"></i>
            <span class="label label-warning">16
            </span>                    </a>
        <ul class="dropdown-menu dropdown-messages" id="latest-messages">
            <li>
                <div class="dropdown-messages-box">...
                </div>
            </li>
            <li class="divider">
            </li>
            <li>
                <a href="mailbox.html">
                    <i class="fa fa-envelope"></i> <strong>Read All Messages</strong></a>
            </li>
        </ul>
    </li>
    <li>...</li>
    <li>...</li>
    ...
</ul>

now I would like to render the ul#latest-messages with react
and IMHO that's currently impossible. why?

i have the following components:
Divider - div.divider
Message - div.dropdown-messages-box
LatestMessages = the ul#latest-messages

if i do this

React.renderComponent(LatestMessages(), li.dropdown); 

it replaces also my link with the icon

if i do this

React.renderComponent(LatestMessages(), ul#latest-messages); 

the i get two uls nested in each other

sure i could go up the hierarchy and convert more and more parent elements to react components, until i'm left with one single div i could anchor the all encompassing component to.

but i just want to the render the dropdown ul with react.

that's why react should have an option to replace the element given in renderComponent.

thanks for reading this long rant and hope for a solution soon

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Nov 8, 2014

Member

Yes, currently you have to replace the entire contents of a container. After #1711 this won't be true any more, but the best workaround is probably to add an extra wrapping element around the <ul>.

Member

sophiebits commented Nov 8, 2014

Yes, currently you have to replace the entire contents of a container. After #1711 this won't be true any more, but the best workaround is probably to add an extra wrapping element around the <ul>.

@sophiebits sophiebits closed this Nov 8, 2014

@bazo

This comment has been minimized.

Show comment
Hide comment
@bazo

bazo Nov 8, 2014

if i could i would do it. if add an extra wrapper the dropdown stops working. so i would have to modify 3rd party code(bootstrap, theme) or just code css overrides which is undesirable.
and the resulting html would not be correct

bazo commented Nov 8, 2014

if i could i would do it. if add an extra wrapper the dropdown stops working. so i would have to modify 3rd party code(bootstrap, theme) or just code css overrides which is undesirable.
and the resulting html would not be correct

@lggwettmann

This comment has been minimized.

Show comment
Hide comment
@lggwettmann

lggwettmann Apr 20, 2015

Will a fix be implemented soon into React? I really like it so far, but this is a major bummer unfortunately.

lggwettmann commented Apr 20, 2015

Will a fix be implemented soon into React? I really like it so far, but this is a major bummer unfortunately.

@zpao

This comment has been minimized.

Show comment
Hide comment
@zpao

zpao Apr 20, 2015

Member

No, I wouldn't expect this to change anytime soon. Maybe eventually.

Member

zpao commented Apr 20, 2015

No, I wouldn't expect this to change anytime soon. Maybe eventually.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment