Allow replacing the anchoring element

[bazo]

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]

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>.

[bazo]

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]

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

[zpao]

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