Aquí está mi función con los argumentos que agregué en index.html en la carpeta pública en una etiqueta de secuencia de comandos
function displayContent(event, contentNameID) { let content = document.getElementsByClassName("contentClass"); let totalCount = content.length; for (let count = 0; count < totalCount; count++) { content[count].style.display = "none"; } let links = document.getElementsByClassName("linkClass"); totalLinks = links.length; for (let count = 0; count < totalLinks; count++) { links[count].classList.remove("active"); } document.getElementById(contentNameID).style.display = "block"; event.currentTarget.classList.add("active"); }Intentando llamar a esta función haciendo clic en los botones en mi componente de reacción que se ve a continuación
<button class="linkClass" onclick="displayContent(event, 'project2')">Meet at Campus </button>por favor guíame con la sintaxis
Parece que estás tratando de hacer una especie de acordeón, pero en realidad no deberías mezclar Vanilla JS con React, ya que React necesita el control del DOM.
Entonces, aquí hay un breve ejemplo de cómo puede abordar esto usando 1) estado y 2) un componente Panel que comprende un botón y algo de contenido.
const { useState } = React; function Example() { // Initialise state with an array of false values const [ state, setState ] = useState([ false, false, false ]); // When a button in a panel is clicked get // its id from the dataset, create a new array using `map` // and then set the new state (at which point the component // will render again function handleClick(e) { const { id } = e.target.dataset; const updated = state.map((el, i) => { if (i === id - 1) return true; return false; }); setState(updated); } // Pass in some props to each Panel component return ( <div> <Panel name="Panel 1" active={state[0]} id="1" handleClick={handleClick} > <span className="text1">Content 1</span> </Panel> <Panel name="Panel 2" active={state[1]} id="2" handleClick={handleClick} > <span className="text2">Content 2</span> </Panel> <Panel name="Panel 3" active={state[2]} id="3" handleClick={handleClick} > <span className="text3">Content 3</span> </Panel> </div> ); } function Panel(props) { // Destructure those props const { name, id, active, handleClick, children } = props; // Return a div with a button, and // content found in the children prop // When the button is clicked the handler is // called from the parent component, the state // is updated, a new render is done. If the active prop // is true show the content otherwise hide it return ( <div className="panel"> <button data-id={id} onClick={handleClick}> {name} </button> <div className={active && 'show'}> {children} </div> </div> ); } ReactDOM.render( <Example />, document.getElementById('react') ); .panel button:hover { cursor: pointer; } .panel { margin: 1em 0; } .panel div { display: none; } .panel div.show { display: block; margin: 1em 0; } .add { margin-top: 1em; background-color: #44aa77; } .text1 { color: darkblue; font-weight: 600; } .text2 { color: darkgreen; font-weight: 700; } .text3 { color: darkred; font-weight: 300; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>no puedes usar
document.getElementById("linkClass").onclick = () =>{ displayContent(); }al darle al elemento una identificación con la misma de la clase?