如何将具有大量属性的对象作为prop传递给React Element？

Question

Please, can you help me to understand what is the corresponding JSX syntax to thi React element?

const data = {
   className: "myEl",
   "data-numb": 3,
   "data-created": 191017
   //following other 20 attributes
}
React.createElement("div",data,"test");

I guess you will not going to write this element in JSX syntax in this way

<div className="myEl" data-numb=3 data-created=191037 ....the other 20 attributes.... />

So, what's the ideal way to pass as prop for the React Element an object that has a huge number of properties?

Answer 1

As far as I understand you are asking for this:

const data = {
   className: "myEl",
   "data-numb": 3,
   "data-created": 191017
   //following other 20 attributes
}

<div {...data}/>

Answer 2

Why not use a data store solution like redux? Then for each component that needed any data from the store, you could just pass whatever you wanted from state to the component via mapStateToProps. This will make things much easier for you in the long run, especially since it sounds like you have a lot of data you are working with. You can use Alexander's answer for now, but if you aren't using a data management solution yet, you are going to really want one before long. Combine this answer with Alexander's where you pass all your data in a single object, and I think your life will be much easier. If you are not familiar with redux yet, definitely check it out at: http://redux.js.org/

The mapStateToProps function is part of the react-redux library, which is used to connect react to the redux store. This article here is a great help if you are trying to wrap your head around what its actually doing, and how you should use redux with your react application.