Estoy tratando de crear un componente de etiqueta reutilizable y, según la empresa, aplicaré el fondo y el color de texto correctos.
const colorMapping = { facebook: "white" } const backgroundMapping = { facebook: "blue" } export const App = (props) => { return ( <div style={{ backgroundColor: "", color: "" }}> {props.company} //Facebook </div> ) }¿Cómo puedo aplicar el color basado en la cadena basada? y ¿Es este el enfoque correcto? ¿Podría simplemente usar 1 objeto de mapeo?
¿Cómo puedo aplicar el color basado en la cadena basada? Digamos que el nombre de this.props.company es la cadena base, ¿verdad? si es así entonces puedes hacer algo como esto
style={{ backgroundColor: backgroundMapping[this.props.company], color: colorMapping[this.props.company] }}pero espera
¿Es este el enfoque correcto? ¿Podría simplemente usar 1 objeto de mapeo? no, entonces, ¿por qué? ¿Qué pasa si no hay color para esta compañía de accesorios? por lo tanto, es posible que el código deba verificar primero que se haya encontrado la asignación del nombre de la empresa dada y, por supuesto, debe usar una asignación única en lugar de dos, entonces, ¿cómo? considere los pasos para crear un objeto de tema como este
const theme={ facebook:{color:"while",background:"blue"}, defaultTheme:{ color:"while",background:"black" } }y luego puede asignar este tema a su componente de la siguiente manera
<div style={theme[this.props.company]||theme.default}> {props.company} //Facebook </div>