Tengo este componente, que hereda un accesorio con un valor de cadena 'A', 'B', 'C' dependiendo de lo que se seleccione en un elemento principal, el punto es el accesorio. Las opciones son 'A' o 'B ' o 'C', entonces quiero aprovechar estos accesorios entrantes para poder seleccionar una lista de opciones locales de la matriz de opciones... dependiendo de lo que se transmita en lugar de pasar las matrices de opciones completas desde el componente principal hasta el componente secundario... Estoy tratando de usar literales de plantilla, pero no está funcionando ningún trabajo local, por lo que podría representar la matriz de opciones dependiendo de los accesorios de cadena entrantes. para este caso en particular.
// incoming props string of A or B or C depending on what is getting seleted at parent element ! function OptionAcordingToProps(props) { const optionsA = ['x', 'x', 'x']; const optionsB = ['y', 'y', 'y']; const optionsC = ['z', 'z', 'z']; return ( <div> <form onSubmit={doSmth}> <NativeSelect> {`options${props.options}`?.map((option) => ( <option>{option}</option> ))} </NativeSelect> </form> </div> ); }Usar un objeto como mapa:
function OptionAcordingToProps(props) { const options = { A: ['x', 'x', 'x'], B: ['y', 'y', 'y'], C: ['z', 'z', 'z'], }; return ( <div> <form onSubmit={doSmth}> <NativeSelect> {options[props.options]?.map((option) => ( <option>{option}</option> ))} </NativeSelect> </form> </div> ); }