Skip to content
This repository has been archived by the owner on Jun 27, 2023. It is now read-only.

Use react "key" attribute for child components #10

Open
slorber opened this issue Jan 24, 2014 · 0 comments
Open

Use react "key" attribute for child components #10

slorber opened this issue Jan 24, 2014 · 0 comments

Comments

@slorber
Copy link
Contributor

slorber commented Jan 24, 2014

See http://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Using a key attribute is useful.

I've provided a simple implementation:

return (<PersonContactOnProfileJumpWrapper
                            key={contactPG.getPointerKeyForReact()}
                            onPersonContactClick={onContactClick}
                            personPG={contactPG}
                            filterText={self.state.filterText}/>)


    /**
     * Return a string key for the current pointer.
     * This is useful for React to be able to associate a key to each relation to avoid recreating dom nodes
     * Note that the key value must be unique or React can't handle this
     * @returns
     */
    // TODO not sure it's a good idea neither if it's well implemented
    $rdf.PointedGraph.prototype.getPointerKeyForReact = function() {
        if ( this.pointer.termType == 'bnode' ) {
            return "BNode-"+this.pointer.id; // TODO not sure it's a good idea (?)
        }
        else if ( this.pointer.termType == 'symbol' ) {
            return this.pointer.value;
        }
        else {
            // TODO for literals we re render???
            return "Literal-TODO-"+Math.random().toString(36).substring(7);
        }
    }

It may not be an ideal implementation, particularly for blank nodes.

We should think about what would be a good "key" implementation.
If we follow a foaf:knows relation for exemple, we should be able to associate an unique key for each pg returned.

The default behavior is probably to never do the association so it's kind of using a random I guess (this is why it's somehow implemented this way)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant