Skip to content
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
Closed

Allow replacing the anchoring element #2484

bazo opened this issue Nov 7, 2014 · 4 comments

Comments

@bazo
Copy link

@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
Copy link
Collaborator

@sophiebits 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
Copy link
Author

@bazo 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
Copy link

@lggwettmann 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
Copy link
Member

@zpao 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.