Actualizar:
Básicamente quiero el mismo resultado pero reestructuré el contenido. No estoy seguro de si sus respuestas todavía están disponibles para eso.
Consulte mi sandbox, siéntase libre de bifurcarlo aquí: https://codesandbox.io/s/get-the-property-value-forked-hutww
Entonces, en ContentData.js , quiero que la image alt tag sea dinámica y extraiga el contenido de la misma del name clave, algo así como alt={this.name} y generará alt="My alt tags"
Consulte los códigos a continuación:
Contenido.js
import React, { Component } from "react"; import mainListsItems from "./ContentData"; class Content extends Component { render() { const myContent = mainListsItems.map((lists, k) => ( <> <div key={k}>{lists.text}</div> {lists.mainContent.map((subcontent, j) => { return <div key={j}>{subcontent.contentAll}</div>; })} </> )); return <>{myContent}</>; } } export default Content;ContentData.js
import React from "react"; const listsData = [ { id: 1, name: "My alt tags", text: ( <> <p>Lorem Imsum</p> </> ), mainContent: [ { contentAll: ( <> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <img alt="" src="https://images.unsplash.com/photo-1637704758245-ed126909d374?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" /> </> ) } ] } ]; export default listsData;El this , en su caso, se refiere al objeto de la ventana.
Puede intentar pasar el nombre como un valor de función. Algo como esto :
const myData = [ { id: 1, name: "Lorem Ipsum", content: (alt) => ( <> <img src="https://images.unsplash.com/photo-1637704758245-ed126909d374?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt={alt} /> </> ) } ]; const output = myData.map((x) => ( <div key={x.id}> <p>{x.name} sa</p> <p>{x.content(x.name)}</p> </div> ));el content se define dentro del objeto mientras se define el objeto. Por lo tanto, aún no hay un name cuando se define el content . Solo después de la asignación existe el name . Estás haciendo referencia a algo que aún no existe. Entonces, en su lugar, puede crear una función que se llamará en un momento posterior después de que se defina el objeto y luego se puede hacer referencia al name como se muestra a continuación.
export default function App() { const myData = [ { id: 1, name: "Lorem Ipsum", content: function(){ return ( <> <img src="https://images.unsplash.com/photo-1637704758245-ed126909d374?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt={this.name} /> </> ) } } ]; const output = myData.map((x) => ( <> <div key={x.id}> <p>{x.name} sa</p> <p>{x.content()}</p> </div> </> )); return <div className="App">{output}</div>; }Puede reemplazar el objeto en su matriz myData con una función autoejecutable como esta:
const myData = [ function(){ const entry = { id: 1, name: "Lorem Ipsum", } return { ...entry, content: ( <> <img src="your image source" alt={entry.name} /> </> ) } }() ];