javascript - Can you add a key to a React JSX Element after it's instantiated? - Stack Overflow

admin管理员组

文章数量:1310875

Given the following:

function generateWrapper(...elements) {
    return (
        <div>
            {...elements}
        </div>
    );
}

ReactDOM.render(
    generateWrapper(
        <MyElement name="first" />,
        <MyElement name="second" />,
    ),
    document.getElementById("app"),
);

React will rightfully plain that I haven't added a key property to each of the children of the wrapper div. How can I do this? Or is this against the spirit of react development? Thanks for any answers in advance!

PS: Yes there is a similar question I looked at but it seemed to be targeting users not using JSX

PPS: I do realize I can merely add a key to first and second MyElement's but this is what I'm attempting to avoid

edit: Changing code to better suit my circumstances

Given the following:

function generateWrapper(...elements) {
    return (
        <div>
            {...elements}
        </div>
    );
}

ReactDOM.render(
    generateWrapper(
        <MyElement name="first" />,
        <MyElement name="second" />,
    ),
    document.getElementById("app"),
);

React will rightfully plain that I haven't added a key property to each of the children of the wrapper div. How can I do this? Or is this against the spirit of react development? Thanks for any answers in advance!

PS: Yes there is a similar question I looked at but it seemed to be targeting users not using JSX

PPS: I do realize I can merely add a key to first and second MyElement's but this is what I'm attempting to avoid

edit: Changing code to better suit my circumstances

• javascript
• reactjs
• web
• jsx

Share Improve this question Follow edited Jul 17, 2017 at 23:47 Right2Drive asked Jul 17, 2017 at 23:35 Right2DriveRight2Drive 13511 silver badge77 bronze badges 4

• If you render a list, every ponents needs a key. – T4rk1n Commented Jul 17, 2017 at 23:50
• I pletely understand why there needs to be a key, and how I could go about doing it during instantiation. I'm just asking if it's possible to do it after instantiation so it could be done once in generateWrapper instead of for every single ponent – Right2Drive Commented Jul 17, 2017 at 23:56
• I normally use [].map((e, i) => <div key={i}>{e}</div>). – T4rk1n Commented Jul 18, 2017 at 0:00
• I have also been remended elsewhere to create a wrapper ponent for MyElement that adds a key to MyElement, just to provide all the alternatives I have received for those looking for answers as well – Right2Drive Commented Jul 18, 2017 at 0:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Take a look at React.cloneElement. You could use that to create and attach the key property inside your generateWrapper method.

function generateWrapper(...elements) {
  return (
    <div>
      {
        elements.map(element =>
          React.cloneElement(element, { key: 'your-unique-key-here' })
      }
    </div>
  );
}

本文标签： javascriptCan you add a key to a React JSX Element after it39s instantiatedStack Overflow