我的页面目前有Navigation.vue组件.我想让每个导航悬停并激活."悬停"有效,但"有效"则无效.
这是Navigation.vue文件的样子:
<template>
<div>
<nav class="navbar navbar-expand-lg fixed-top row">
<router-link tag="li" class="col" class-active="active" to="/" exact>TIME</router-link>
<router-link tag="li" class="col" class-active="active" to="/CNN" exact>CNN</router-link>
<router-link tag="li" class="col" class-active="active" to="/TechCrunch" exact>TechCrunch</router-link>
<router-link tag="li" class="col" class-active="active" to="/BBCSport" exact>BBC Sport</router-link>
</nav>
</div>
</template>
Run Code Online (Sandbox Code Playgroud)
以下是风格.
<style>
nav li:hover,
nav li:active{
background-color: indianred;
cursor: pointer;
}
</style>
Run Code Online (Sandbox Code Playgroud)
如果你给我一个关于样式路由器链接活动作品的建议,我将不胜感激.谢谢.
我有一个像obj = { test1: 'sth', test2: 'sth', label: 'sth' }.
我想解构这个对象,{...obj} 除了 labelget { test1: 'sth', test2: 'sth' }。
如何在没有这个键的情况下解构对象?
我应该创建一个新对象还是有什么方法可以简单地在一行中做到这一点?
我有这样的数组:
const sample = [
{ name: 'apple', detail: [{'a', 'b'}]},
{ name: 'banana', detail: [{'a', 'b'}]},
];
Run Code Online (Sandbox Code Playgroud)
假设我想创建一个类似于以下附件的表:
那是表的主体部分,我已经把所有的细节都放在了 . 它按照我的预期创建桌子,但尺寸非常窄,而且与桌子头也不匹配。
我想知道是否有一种智能方法可以将多个数据连续映射并嵌入到一个表格单元格中。
名称部分(苹果和香蕉)必须是第一个具有行跨度的表格单元格。
我正在尝试将 Material-ui 组件扩展为我自己的具有自定义属性的组件。我正在使用带有打字稿的reactjs。
下面的代码是我的试用:
import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core';
import { Theme } from '@material-ui/core/styles/createMuiTheme';
import Tabs, { TabsProps } from '@material-ui/core/Tabs';
export interface Iprops extends TabsProps {
/* how to add a variant ? */
}
const useStyles = makeStyles((theme: Theme) => ({
root: {
// styles
}
}));
export const BasicTabs = (props: Iprops) => {
const classes = useStyles(props);
if (props.variant === 'test') {
return (
<Tabs
{...props} …Run Code Online (Sandbox Code Playgroud) /bin/sh: 1: pkg-config: 未找到 gyp: 在 binding.gyp 中调用“pkg-config pixman-1 --libs”返回退出状态 127。在尝试加载 binding.gyp 时
错误:
gyp失败,退出代码:1
我尝试用brew安装pkg-config,但出现同样的错误。
有人对这个问题有想法吗?我也安装了rosetta。
我正在使用VueJS路由器,但路由器没有加载组件.
我有About.vue和Contact.vue,只是带有要测试的标签 - 以下是它的样子:
<template>
<div>
<h1>Contact page. Welcome baby!</h1>
</div>
</template>
Run Code Online (Sandbox Code Playgroud)
这是带有三个路由器链路和路由器视图的App.vue.
<template>
<div>
<h1>Routing</h1>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
<router-view></router-view>
</div>
</template>
Run Code Online (Sandbox Code Playgroud)
这是main.js(导入文件的路径是正确的)
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {routers} from './router'
Vue.use(VueRouter);
let router = new VueRouter({mode: 'history', routers});
new Vue({
el:'#app',
router,
components: {
'app-home' : App
}
});
Run Code Online (Sandbox Code Playgroud)
这是路由器的JS文件.router.js(路径正确)
import About from './About.vue'
import Contact from './Contact.vue'
import Home …Run Code Online (Sandbox Code Playgroud) 我的 React 应用程序不是由 create-react-app 运行,而是由自定义 Webpack 配置运行。
我已经安装了dotenv//dotenv-expand以及dotenv-webpack.
我有.env/.env.development文件,API_URL其中包含变量。
在我的网址文件上,
const { API_URL } = process.env
Run Code Online (Sandbox Code Playgroud)
并用它API_URL来获取数据。
但在这个文件上,当我 时console.log(process.env),它是空的。
我也尝试过更新webpack.config.js文件
const Dotenv = require('dotenv-webpack');
Run Code Online (Sandbox Code Playgroud)
和
new Dotenv()
Run Code Online (Sandbox Code Playgroud)
在插件数组中。
但还是不行。
我也尝试过使用变量名REACT_APP_API_URL,但结果相同。
有人可以帮我设置环境变量吗?
谢谢。
webpack.config.js
const webpack = require('webpack')
const Dotenv = require('dotenv-webpack');
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackMerge = require('webpack-merge')
const modeConfig = env => require(`./build-utils/webpack.${env}`)(env)
const …Run Code Online (Sandbox Code Playgroud) reactjs ×3
material-ui ×2
vue-router ×2
vue.js ×2
css ×1
html-table ×1
javascript ×1
pkg-config ×1
routerlink ×1
typescript ×1
webpack ×1