Preciso criar diversas tags li baseadas em um array e então inseri-las em uma div, entretanto preciso esperar a tal div ser criada antes de realizar tal feito. Já que no React não existe o DOMContentLoaded o que posso usar para fazer o mesmo efeito? Estou trabalhamdo com React Hooks
1 Resposta
Pelo que pude entender, é necessário a execução de alguma função quando o componente estiver pronto (carregado), utilize useEffect com um array
sem nenhuma posição, isso significa a execução após o carregamento do componente, exemplo:
function App() {
const [list, setList] = React.useState([
{id: 1, name: 'name 1'},{id: 2, name: 'name 2'},
{id: 3, name: 'name 3'},{id: 4, name: 'name 4'}
]);
function init() {
console.log('carregou ...');
}
React.useEffect(() => {
init();
},[]);
return (
<div>
<ul>
{list && list.map((l,x) => (<li key={x}>{l.name}</li>))}
</ul>
</div>
)
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
-
Perfeito era isso mesmo, eu posso usar isso atrelado a uma div? Assim que uma div for renderizada o useEffect chamar uma função? 11/02/2021 às 7:30
-
Você pode fazer sim @JhonatasFlordeSousa precisa exemplificar como você quer isso, abra outra pergunta e explique tudo isso de maneira mais clara possível porque, cada duvida gera um nova pergunta– novic11/02/2021 às 12:56
React
?