以下是四个组成部分:
应用程序.js:
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import About from './About';
import Home from './Home';
const App = () => {
return <Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
}
export default App;
Run Code Online (Sandbox Code Playgroud)
导航.js:
import * as React from 'react';
import {Box,Tabs,Tab} from '@material-ui/core';
function LinkTab(props) {
return (
<Tab
component="a"
onClick={(event) => {
event.preventDefault();
}}
{...props}
/>
);
}
export default function NavTabs() {
const [value, setValue] = …Run Code Online (Sandbox Code Playgroud) 我正在尝试使用 React 应用程序添加 Tailwind CSS。我遵循顺风文档,如何使用反应设置顺风。
我尝试使用 tailwind 最新版本。我检查了 Nodejs 和 npm 是否安装完美。
但是当我运行它时npm run start总是出现错误。我无法解决这个问题。
包.json
{
"name": "tailwind-css",
"version": "0.1.0",
"homepage": "",
"private": true,
"dependencies": {
"@craco/craco": "^6.1.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"engines": {
"npm": "6.14.6",
"node": "12.18.4"
},
"browserslist": {
"production": [
">0.2%",
"not dead", …Run Code Online (Sandbox Code Playgroud) 我之前在 React 16 上运行过 recat-matcjax2。它运行得很好。但是当将 React 版本 16 更新到 17 时,它不能完美工作。
我收到几个错误。
这是两个错误文件。
尝试实施:
import MathJax from 'react-mathjax2';
const equation = '(a+b)^2';
const MathJax = () => {
return <MathJax.Context input='ascii' key='math'>
<MathJax.Node inline>{equation} </MathJax.Node>
</MathJax.Context>
}
Run Code Online (Sandbox Code Playgroud)
我的index.html档案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {delimiters: [['$','$']]},
"HTML-CSS": …Run Code Online (Sandbox Code Playgroud) reactjs ×3
javascript ×2
node.js ×2
html ×1
material-ui ×1
mathjax ×1
node-modules ×1
react-router ×1
tailwind-css ×1