javascript - examples - semantic ui templates react
Interfaz de usuario semántica(React): cómo utilizar los componentes de enlace en los elementos de Menu.List (2)
Necesitas utilizar el augmentation de SUIR:
<Menu.Item as={ Link } name=''profile'' to=''profile''>
<Icon name=''user'' />
My profile
</Menu.Item>
Estoy tratando de obtener una lista de menú de ui (reaccionar) semántica, que debería estar trabajando con el enrutador de reacción, lo que significa que me gustaría usar el componente de Link
del react router
de react router
Si uso esto ...
<Menu.Item name=''profile''>
<Icon name=''user'' />
My profile
</Menu.Item>
... me da el resultado:
<a class="item">
<i aria-hidden="true" class="user icon"></i>
My profile
</a>
Pero me gustaría conseguir algo como
<Link to=''profile''>
<i aria-hidden="true" class="user icon"></i>
My profile
</Link>
Este no funciona, ya que la sintaxis es incorrecta:
<Menu.Item name=''profile'' as={ <Link to=''profile'' /> }>
<Icon name=''user'' />
My profile
</Menu.Item>
Utilice browserHistory.push
en browserHistory.push
lugar; También fue provisto por react-router
como una alternativa de Link
pero sin marcado:
import {browserHistory} from ''react-router'';
redirect(to) {
browserHistory.push({
pathname: to
});
}
//......
<Menu.Item name="profile" onClick={this.redirect(''/profile'')}
<Icon name=''user'' />
My profile
</Menu.Item>
Si desea obtener /profile
de accesorios de name
, cambie la línea por:
<Menu.Item name="profile" onClick={(event, itemProps) => this.redirect(itemProps.name)}
Y si es así, <Menu onItemClick={...} >
es mejor que <Menu.item onClick={...} >