<SingleSheet sheet={songSheet} className="sheet-item" />  

{sheetList.map((item, idx) => { return ( <div key={idx} className="wyy-sheet-item" style={{ width: "128px", height: "204px", marginRight: "42px" }} > 部分的react代码 .wyy-sheet-item:nth-of-type(4n) { margin-right: 0; } css样式  

如何利用input输入框控制表格的筛选呢？官网只有内部下拉框进行搜索查询。

目前用的是react + umi配置webpack  配置方式为 1.在测试环境可以读取到事件触发的错误，但并不是详细错误，sourcemap应该没有传上去，是配置有问题？还是初始化入口有问题？ 2.无法捕获到渲染dom时数据格式不对导致白屏的错误  

 如图：使用webpack打包html文件，下载html-webpack-plugin成功，但出现报错： [webpack-cli] Error: Cannot find module 'html-webpack-plugin' 已经把包下载到全局下了，是路径问题嘛？如何下载到本地？npm install html-webpack-plugin -D没有效果，还是安装到全局下。    

react-native或者react  怎么把它们的APP打包编译成HTML5页面 其实主要是编译的问题   有人知道吗??? 可以告诉我一些工具或者其他的思路吗???  

使用React函数式组件做一个音频播放器（代码只有相关部分）   const [playState, setPlayState] = useState(false); 在App组件中引用了useState管理音乐的播放状态（false为暂停，true为正常播放）   <allContext.Provider value={{ playState, setPlayState, }} > <Home /> </allContext.Provider> 使用createContext创建上下文并将播放状态playState存入到上下文中供子组件使用   const { setPlayList, setPlayState, } = useContext(allContext); const getTracks = (id) => { setPlayState((playState) => !playState); const fetchData = async () => { const resultTracks = await axios.get( `${API_CONFIG}playlist/detail?id=${id.toString()}` ); setPlayList(resultTracks.data.playlist.tracks); }; fetchData(); }; 子组件SingleSheet中引入上下文中的playState，getTracks函数是Button按钮的点击事件，得到歌单列表，同时播放歌单中的第一首歌曲；于是修改playState的状态为true   const { playState, setPlayState, } = useContext(allContext); const onToggle = () => { if (ready) { setPlayState(!playState); if (playState) { myRef.current.play(); } else { myRef.current.pause(); } } }; 然后，在子组件的上下文中引入playState状态；onToggle函数是控制播放/暂停按钮的点击事件，点击按钮playState的值确实修被改成了false，但是歌曲并没有暂停，再次点击playState的值被修改成true之后，反而暂停了。 请问这属于useState更新状态的延迟吗？如何解决呢？

Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... npm ERR! code 1 npm ERR! path D:\zy\demo\demo\node_modules\bufferutil npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node-gyp rebuild npm ERR! gyp ERR! find Python npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON npm ERR! gyp ERR! find Python checking if "python3" can be used npm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if "python" can be used npm ERR! gyp ERR! find Python - "python" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if "python2" can be used npm ERR! gyp ERR! find Python - "python2" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if Python is C:\Python37\python.exe npm ERR! gyp ERR! find Python - "C:\Python37\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Python27\python.exe npm ERR! gyp ERR! find Python - "C:\Python27\python.exe" could not be run npm ERR! gyp ERR! find Python checking if the py launcher can be used to find Python npm ERR! gyp ERR! find Python - "py.exe" is not in PATH or produced an error npm ERR! gyp ERR! find Python npm ERR! gyp ERR! find Python ********************************************************** npm ERR! gyp ERR! find Python You need to install the latest version of Python. npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not, npm ERR! gyp ERR! find Python you can try one of the following options: npm ERR! gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe" npm ERR! gyp ERR! find Python - Set the environment variable PYTHON npm ERR! gyp ERR! find Python - Set the npm configuration variable python: npm ERR! gyp ERR! find Python npm config set python "C:\Path\To\python.exe" npm ERR! gyp ERR! find Python For more information consult the documentation at: npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation npm ERR! gyp ERR! find Python ********************************************************** npm ERR! gyp ERR! find Python npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Could not find any Python installation to use npm ERR! gyp ERR! stack at PythonFinder.fail (D:\zy\demo\demo\node_modules\node-gyp\lib\find-python.js:302:47) npm ERR! gyp ERR! stack at PythonFinder.runChecks (D:\zy\demo\demo\node_modules\node-gyp\lib\find-python.js:136:21) npm ERR! gyp ERR! stack at PythonFinder.<anonymous> (D:\zy\demo\demo\node_modules\node-gyp\lib\find-python.js:200:18) npm ERR! gyp ERR! stack at PythonFinder.execFileCallback (D:\zy\demo\demo\node_modules\node-gyp\lib\find-python.js:266:16) npm ERR! gyp ERR! stack at exithandler (node:child_process:340:5) npm ERR! gyp ERR! stack at ChildProcess.errorhandler (node:child_process:352:5) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:376:20) npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:282:12) npm ERR! gyp ERR! stack at onErrorNT (node:internal/child_process:476:16) npm ERR! gyp ERR! stack at processTicksAndRejections (node:internal/process/task_queues:80:21) npm ERR! gyp ERR! System Windows_NT 10.0.19041 npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\zy\\demo\\demo\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" npm ERR! gyp ERR! cwd D:\zy\demo\demo\node_modules\bufferutil npm ERR! gyp ERR! node -v v15.5.1 npm ERR! gyp ERR! node-gyp -v v7.1.2 npm ERR! gyp ERR! not ok npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Lc\AppData\Local\npm-cache\_logs\2021-04-14T15_07_27_757Z-debug.log Aborting installation. npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed. Deleting generated file... package.json Deleting demo/ from D:\zy\demo Done.  

比如home组件有自己的store，user组件也有store，如何在user组件中调用home的state

react-native 的TabNavigator 导航跳转,不知道为什么跳转不了,详细代码在下面...  只有没有到TabNaigator  导出的那一步就不可以了,哪位大神帮我解决一下这个问题,可能是导入导出的问题!!!!!!

请问这是什么错误？

 this.state ={  unit:{}  } componentDidMount(){  const { unit } = this.props;         this.setState({unit});} onChange = (e) => {   //这里该怎么写  } render()// <Input id='title' placeholder="Basic usage" defaultValue={unit.zipcode} value={unit.zipcode}             onChange={this.onChange}             />

const div1 = React.createElement('div', null, '1') const div2 = React.createElement('div', null, '2') const div3 = <div>3</div> const div4 = <div>4</div> return div1 + div2 //div1 和 div2 怎么合并 return div3 + div4 //div3 和 div4 怎么合并 div1、div2、div3、div4都是动态获取的，想把他们合在一起后统一 return 出去

  从服务器拿到的数据： <p>三种不同尺寸可选，15W-35W-50W。轨道灯由压铸铝ADC12制成；表面粉末涂层为白色、黑色或银色；COB（芯片板上）技术实现最大效率；无多个阴影；节能LED具有非常好的显色性；binning initial≤3碎石；可提供3000K的浅色，4000K和5000K；CRI≥80/≥90；50000小时后至少达到80%的光通量；BO 70基本型：具有球面表面光洁度的优质铝反射器；高光泽度阳极氧化；具有四种不同光束角的精确辐射特性；无需工具即可安装和更换；适配器可在各种类型的三相电源线；可选DALI、TRIAC。</p> 如何把它显示成正常的 html 代码

/* 实现一个循环引用树形组件 要求： 1. 要考虑数据循环引用问题。 2. 除了 React，Antd 外，不能使用任何第三方库，只能使用浏览器原生 API   如：存在三条数据 A、B、C： - A 的子元素为 B、C - B 的子元素为 C、A - C 的子元素为 A、B 则构成 A -> B -> C -> A 的循环引用。 渲染结果如下图所示，其中每个节点都可以展开，且可以无限递归展开。 https://s3plus.meituan.net/v1/mss_bf7e9f1c1cc54cfb819fc8ffcf965b40/static/WX20201209-113933%402x.png */ import React, { useState } from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import { Tree } from "antd"; const a = { id: 1, title: "A" }; const b = { id: 2, title: "B" }; const c = { id: 3, title: "C" }; const d = { id: 4, title: "D" }; const e = { id: 5, title: "E" }; const f = { id: 6, title: "F" }; const g = { id: 7, title: "G" }; a.children = [b, d, e]; b.children = [c, e, f]; c.children = [e, g, a]; d.children = [e, f, g]; e.children = [a, b, c]; f.children = [c, d, e]; g.children = [b, e, f]; const data = [a, b, c, d, e, f, g]; const ROOT = 0; const Demo = () => { const [entities] = useState(() => { return [a, b, c, d, e, f, g].reduce((r, d) => { r[d.id] = d; return r; }, {}); }); const [childrenMap, setChildrenMap] = useState(() => { return { [ROOT]: data.map((d) => ({ id: d.id, title: d.title, key: Math.random() })) }; }); const onLoadData = React.useCallback((parent) => { return new Promise((resolve) => { if (parent.children) return resolve(); setTimeout(() => { }); }); }, []); const treeData = React.useMemo(() => { const iter = (children) => { if (!children) return; return children.map(({ key, id }) => { const item = entities[id]; if (!item) return null; return null; }); }; return iter(childrenMap[ROOT]); }, [entities, childrenMap]); return <Tree loadData={onLoadData} treeData={treeData} />; }; export default Demo;  

我想要用 React Navigation 5.X 能够全局监听到路由变化，已保证路由变化时中断正在进行的请求。官方文档实在是看的一头雾水，求求各位大佬帮帮孩子吧，实在是搞不定了。原来2.X的时候用的是，router.getStateForAction，我看5.X的给取消了，然后自定义路由里有这个方法，但是官方的例子给的不全，孩子实在是无能为力啊。

Uncaught TypeError: Cannot read property 'includes' of undefined

https://react.docschina.org/docs/optimizing-performance.html

目标是实现Tabs标签页的文字可以修改； 目前我的思路是给Tab元素添加一个input输入框，点击时触发，鼠标移开时保存输入文字，但不知道代码该如何写； 这是我已有的代码，展示了Tabs标签页，并实现了新增删除功能； 框架语言是React+JS，使用了Antd组件库； import { Tabs, Input } from 'antd'; import React from 'react'; const { TabPane } = Tabs; const initialPanes = [ { title: 'Tab 1', content: 'Content of Tab 1', key: '1' }, { title: 'Tab 2', content: 'Content of Tab 2', key: '2' }, { title: 'Tab 3', content: 'Content of Tab 3', key: '3', }, ]; class Demo extends React.Component { newTabIndex = 0; state = { activeKey: initialPanes[0].key, panes: initialPanes, }; onChange = (activeKey) => { this.setState({ activeKey }); }; onEdit = (targetKey, action) => { this[action](targetKey); }; add = () => { const { panes } = this.state; const activeKey = `newTab${this.newTabIndex++}`; const newPanes = [...panes]; newPanes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey }); this.setState({ panes: newPanes, activeKey, }); }; remove = (targetKey) => { const { panes, activeKey } = this.state; let newActiveKey = activeKey; let lastIndex; panes.forEach((pane, i) => { if (pane.key === targetKey) { lastIndex = i - 1; } }); const newPanes = panes.filter((pane) => pane.key !== targetKey); if (newPanes.length && newActiveKey === targetKey) { if (lastIndex >= 0) { newActiveKey = newPanes[lastIndex].key; } else { newActiveKey = newPanes[0].key; } } this.setState({ panes: newPanes, activeKey: newActiveKey, }); }; render() { const { panes, activeKey } = this.state; return ( // eslint-disable-next-line react/react-in-jsx-scope // eslint-disable-next-line react/jsx-filename-extension <Tabs type="editable-card" onChange={this.onChange} activeKey={activeKey} onEdit={this.onEdit} > <Input type="text" /> {panes.map((pane) => ( <TabPane tab={pane.title} key={pane.key} closable={pane.closable}> {pane.content} </TabPane> ))} </Tabs> ); } } export default Demo; 如果大佬愿意提供具体的代码的话，万分感谢！

希望用React实现一个echarts可拖拽折线图； 框架语言是React+JS，使用了echarts-for-react； 根据echarts官网上面的示例，在option{}中加入graphic组件，代码如下： import ReactEcharts from 'echarts-for-react'; import React from 'react'; class MyEcharts extends React.Component { state = { option: {}, }; setOption = () => { const data = [ [15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40], ]; const symbolSize = 20; const option = { xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false }, }, yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false }, }, series: [ { id: 'a', type: 'line', smooth: true, symbolSize, data, }, ], graphic: data.map(function (item, dataIndex) { return { type: 'circle', position: myChart.convertToPixel('grid', item), shape: { cx: 0, cy: 0, r: symbolSize / 2, }, invisible: true, draggable: true, ondrag(dx, dy) { onPointDragging(dataIndex, [this.x, this.y]); }, z: 100, }; }), }; function onPointDragging(dataIndex, pos) { data[dataIndex] = myChart.convertFromPixel('grid', pos); } myChart.on('dataZoom', updatePosition); function updatePosition() { myChart.setOption({ graphic: data.map(function (item, dataIndex) { return { position: myChart.convertToPixel('grid', item), }; }), }); } // // Update data myChart.setOption({ series: [ { id: 'a', data, }, ], }); this.setState({ option, }); }; render() { return ( <ReactEcharts style={{ marginTop: '20px', height: '400px', border: '1px solid rgb(204 20 204 / 0.5)', paddingTop: '10px', borderRadius: '6px', }} option={this.setOption()} /> ); } } export default MyEcharts; 浏览器报错 ：ReferenceError: myChart is not defined 请问该如何修改我的代码？ 如果大佬可以上传具体代码的话，感激不尽！      

  目标是实现数据点可拖拽的echarts折线图； 框架是React，目前的代码如下： import * as echarts from 'echarts'; import ReactEcharts from 'echarts-for-react'; import React, { Component } from 'react'; class Index extends Component { constructor(props) { super(props); this.state = { data: [], }; } componentDidMount() { const { data } = this.state; // 基于准备好的dom，初始化echarts实例 const myChart = echarts.init(document.getElementById('forms')); // 绘制图表 myChart.setOption({ title: { text: '96点可拖拽折线图', }, tooltip: {}, legend: { data: ['负荷'], }, xAxis: { type: 'value', }, yAxis: { type: 'value', }, // 横纵拖拽 dataZoom: [ { type: 'slider', xAxisIndex: 0, filterMode: 'none', }, { type: 'slider', yAxisIndex: 0, filterMode: 'none', }, { type: 'inside', xAxisIndex: 0, filterMode: 'none', }, { type: 'inside', yAxisIndex: 0, filterMode: 'none', }, ], series: [ { id: 'a', smooth: true, name: '负荷', type: 'line', data: [150, 230, 224, 218, 135, 147, 260], }, ], graphic: data.map(data, (item, dataIndex) => { return { type: 'circle', // 将圆点平移到的位置 position: myChart.convertToPixel('grid', item), shape: { cx: 0, cy: 0, // r: symbolSize / 2, }, // 圆点不可见 invisible: true, // 圆点可拖拽 draggable: true, // 拖拽的响应事件，被拖拽时不断触发 ondrag(dx, dy) { this.onPointDragging(dataIndex, [this.x, this.y]); }, // 圆点在最上方，覆盖其他 z: 100, }; }), }); // eslint-disable-next-line no-undef onPointDragging = (dataIndex) => { // 根据圆点的位置，将像素坐标转换成直角坐标，更新data data[dataIndex] = myChart.convertFromPixel('grid', this.position); // 用更新后的data,重绘折线图 myChart.setOption({ series: [ { id: 'a', data, }, ], }); }; } render() { return <div id="forms" style={{ width: '650px', height: '350px' }} />; } } export default Index; 浏览器报错如下： TypeError: [object Array] is not a function Index.componentDidMount ./src/pages/echarts/echarts.js:74 71 | data: [150, 230, 224, 218, 135, 147, 260], 72 | }, 73 | ], > 74 | graphic: data.map(data, (item, dataIndex) => { | ^ 75 | return { 76 | type: 'circle', 77 | // 将圆点平移到的位置   请问我该如何修改代码？如果能提供具体修改后代码，感激不尽！

将message和description的文字改成橘色 import { Button, notification, Space } from 'antd'; const openNotificationWithIcon = type => { notification[type]({ message: 'Notification Title', description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.', }); }; ReactDOM.render( <Space> <Button onClick={() => openNotificationWithIcon('success')}>Success</Button> <Button onClick={() => openNotificationWithIcon('info')}>Info</Button> <Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button> <Button onClick={() => openNotificationWithIcon('error')}>Error</Button> </Space>, mountNode, );  

在umi2的版本里添加了exportStatic,但是打包build的时候会报错(不能升级到umi3的前提下,望大神/大佬回复) 第一张图是npm run build 后返回的错误 第二张图是yarn build 后返回的错误  

下拉选项， 正确的应该出现在下拉框的下部。然而，却错误的出现在下拉框的上部。求大神帮解决一下。

在scroll监听的回调里面用了loading绑定的方法，外部render的时候值已经变了，却回调里面的loading却还是初始化的值，什么情况？

我将pages文件夹下面的me.jsx放到了models文件夹中的me文件夹下： 然后修改了路由为对应目录配置： 启动之后就报了以下错误：

微信小程序中地图组件点击callout 触发事件 bindcallouttap ，但是返回值，只能拿到 makerid ，能不能拿到 当前maker 的所有值，求大神指教

目前我们小程序引入了网易云信第三方库，在查看每天的报错信息的时候，发现 Cannot read property 'charAt' of undefined这个报错占了每天报错的一大半，现在我们小程序一天报错1100多，一大半的原因都在这里，求大佬求助，解决好长时间了，还是报错，之前5分钟20多次，现在5分钟10几次，偶尔20几次，找不到原因，求大佬救命