Tengo un componente principal, que representa un componente secundario varias veces. Este componente secundario se utiliza en muchos componentes diferentes. Necesito tener una matriz en este componente secundario que conserve todas las representaciones anteriores del componente, luego obtener acceso al texto más grande que se le pasó.
import TextComponent from '../../text' const ParentComponent = ()=>{ // ... some code here and get some data from API const text = getTextFromAPI() return ( <> <ARandomComponent/> <AnotherRandomComponent/> <TextComponent text={text}/> </>) } En TextComponent , necesito saber qué texto recibió cada elemento y devolver el texto más grande. Pensé que tal vez podría tener una matriz dentro de TextComponent pero, por supuesto, con cada representación, el componente tiene datos nuevos y sé que esto es así por diseño.
¿Hay alguna forma de activar esto? Para almacenar un valor en TextComponent que otros renderizados de diferentes lugares todavía tienen acceso a ese valor
Si su ParentComponent no se vuelve a representar. Podría usar un useState con la condición de llamar a su setState de que el estado real es más pequeño que el nuevo texto que recibirá.
Editar: aclaró en un comentario el requisito de un valor "global" utilizado por varios componentes. Este es un caso para usar la API de contexto incorporada o una biblioteca de administración de estado como Recoil o Effector .
Puede usar un gancho como este para almacenar la cadena más larga vista durante la vida útil del componente que la usó:
function useLongestString (text = '') { const [str, setStr] = useState(text); if (text.length > str.length) setStr(text); return str; }Manifestación:
<div id="root"></div><script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script> <script type="text/babel" data-type="module" data-presets="react"> const {useState} = React; function useLongestString (text = '') { const [str, setStr] = useState(text); if (text.length > str.length) setStr(text); return str; } function DisplayLongestString (props) { const longest = useLongestString(props.text); return <div>{longest}</div>; } function Example (): ReactElement { const [value, setValue] = useState('Keep typing'); return ( <div> <h2>Longest string:</h2> <DisplayLongestString text={value} /> <input onChange={ev => setValue(ev.target.value)} placeholder="Type a longer string" value={value} /> </div> ); } ReactDOM.render(<Example />, document.getElementById('root')); </script>