Tengo un requisito que necesita para actualizar el estilo del elemento en función del contenido dinámico. Aquí estoy configurando la altura máxima del elemento ul en función del contenido detallado.
if (element.innerText === this.res.viewMore) { primaryButtonText = this.res.viewLess; messageListElement.style.maxHeight = `${this.checkHeightOfList( detail.split(','), )}px`; } else { primaryButtonText = this.res.viewMore; messageListElement.style.maxHeight = null; }¿Cuál es la mejor práctica para actualizar la altura máxima en reaccionar js? Aquí está mi DOM
La mejor práctica para actualizar un atributo de estilo en reaccionar es hacer algo como esto:
const maxHeight = someCondition ? null : '100px';Y para aplicar esta altura máxima, haga:
<div style={{max-height: maxHeight}}>my list</div> Si desea que max-height se actualice dinámicamente, almacene maxHeight como una variable de state y actualícela según corresponda usando setState .
Su código de ejemplo tiene un fuerte enfoque de javascript. En React, almacenaría su estado en una variable ( viewState en mi ejemplo), y representaría el estilo condicionalmente con esta variable. Su código podría ser algo como esto:
const yourDetailArray = ["foo", "bar", "test", "view"]; const List = () => { const [viewState, setViewState] = React.useState(false); const checkHeightOfList = () => { // Setting the max height to 10px * length of array to show effect if (viewState) return yourDetailArray.length * 10 + "px"; else return null; }; return ( <React.Fragment> <ul style={{ maxHeight: checkHeightOfList(), border: "1px solid grey" }}> {yourDetailArray.map((item) => ( <li>{item}</li> ))} </ul> <button onClick={() => setViewState(!viewState)}> {viewState ? "View less" : "View more"} </button> <p>State is currently : {viewState ? "true" : "false"}</p> <p>Max height is currently: { checkHeightOfList() || 'null' }</p> </React.Fragment> ); }; // Render it ReactDOM.render( <List />, document.body ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>Hay formas de optimizar este código, pero espero que muestre el concepto. Tenga en cuenta que este ejemplo utiliza componentes funcionales que pueden diferir en su código.