Tengo un componente que tiene valor de props . Este componente es global y no quiero cambiar su código fuente. Quiero agregar una etiqueta pre dentro de la propiedad de valor para tener una sangría adecuada entre el title y el value .
<component title = {<strong>Name</strong>} value = {<pre> {name === undefined ? myName : myNames}</pre>} /> Problema: Obtengo NaN por propuesta de valor.
¿Cómo lo soluciono?
Además, ¿hay alguna manera de agregar un espacio/relleno entre el title y el value ? Tenga en cuenta que no deseo modificar el archivo fuente de Component .
Cada vez que me enfrento a una situación como esta, mi primer enfoque es crear una función de ayuda para renderizar las partes más pequeñas y pasarlas como accesorios mientras invoco esa función simultáneamente.
Por ejemplo, para su caso: -
//helper function to render title const renderTitle = () => { return <strong>Name</strong>; }; //helper function to render value, you can also add styles to them via inline styles or using class or id. const renderValue = () => { return ( <pre style={{ marginLeft: 15 }}> {name === undefined ? "myName" : "myNames"} </pre> ); }; return ( <div style={{ display: "flex" }}> <CustomComponent title={renderTitle()} value={renderValue()} /> // invoking the helper functions to render the title and value </div> );Enlace de Codesandbox - https://codesandbox.io/s/eloquent-resonance-h4m49
Puede pasar los componentes de utilería en el siguiente ejemplo de lo que hice para la vista en vivo, puede consultar aquí SandBox
import React, { useState } from 'react'; import { render } from 'react-dom'; const Success = () => { return <pre>Your state isn't undefined</pre> } const Undefined = () => { return <pre>Your state isn't undefined</pre> } const ReturnProp = ({propJSX}) => { return propJSX } const App = () => { const [name, setName] = useState(undefined) return <ReturnProp propJSX={name===undefined? <Undefined />: <Success />}/> } render(<App />, document.querySelector('#app'));