Open Yuicon opened 7 years ago
好像并没有用到redux吧
@Molin123 下一篇会讲Redux 项目代码里已经有了 可以去看看 欢迎多提建议
Module not found: Can't resolve 'element-theme-default' in 'D:\workspaceForNode\digag\src' 这个是什么问题啊
@Aslan007 我猜是依赖的问题 这是 element-react 文档 你对比下 你和我的 package.json
@Aslan007 我也遇到同样的问题,你的问题解决了吗?怎么解决的
@Yuicon 对比了package.json,我的少了很多东西,然后我把你的直接复制下来又一堆报错
App.js中,相对地址好像错了
import Header from "../../components/Index/Header";
应该是./components/Index/Header
吧
@KevinYY 是的 后面目录结构有改过 这里没有改过来
×
addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render
method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
这个是什么问题?在使用element-react的Input时产生的?
@ZiSeFeng 可能是你的依赖里写了两个 react 没有具体代码 我也只能猜测
@Aslan007 需要安装以下两个组件
npm install element-react
npm install element-theme-default
页面可以跳出来一下 就不见了 之后报了这样一个错误
addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render
method, or you have multiple copies of React loaded
样式错乱了
请问这是什么问题
@duziten 你把出问题的项目打包给我看看 不然我也不清楚是什么问题
@duziten package.json 都没有... 把完整的给我看看
@duziten 问题应该是 create-react-app 的版本问题 我当时写的时候 create-react-app 的 react 版本是 15.6.1 现在已经到 16 了 。 element-react 里的react版本也是15.6.1的 冲突了
好吧,谢谢啦
同样遇到楼上的那个版本问题 react 16应该安装哪个版本的element-react
@aen516954023 可以改用低版本的create-react-app 或者升级element-react版本 去仓库看了下 element-react 1.3.1 版本是用的react 16
npm i element-react --save npm install element-theme-default --save
2个命令就好了
样式有问题
Menu组件呢
@tangyanjie123 这个组件是引用的UI框架的 不是自己写的
做了一个看好康小姐姐的app,有兴趣的可以下载
项目代码地址:https://github.com/DigAg/digag-pc-react React 实践项目 (一) React 实践项目 (二) React 实践项目 (三) React 实践项目 (四) React 实践项目 (五)
参考代码
首先,我们开始构建一个基础项目。
我们使用create-react-app创建项目,不需要安装或配置Webpack或Babel等工具。它们被预先配置和隐藏,以便我们可以专注于代码。
在本地全局安装create-react-app(需要安装Node.js且版本 >= 6,也可使用 yarn 代替 npm)
创建项目
检查是否成功创建digag文件夹与相关文件
在开发模式下运行应用程序,访问localhost:3000在浏览器中查看。
这样我们就成功创建好一个可以直接运行的React项目了!
接下来,开始编写代码了!
首先我们打开 src 目录下的 App.js 文件,删除掉默认生成的代码。输入以下代码:
同样,编辑 App.css 文件:
可能已经有同学注意到了,我们在 App.js 里导入了一个目前还不存在的组件。现在,我们来创建它:
编辑 Header.js 文件
export default class Header extends Component {
constructor(props) { super(props); this.state = { searchInput: '', }; }
handleSelect = (index) => { console.log(index); };
handleIconClick = () => { console.log('handleIconClick', this.state.searchInput); };
render() { return (
} }
//省略部分代码 "dependencies": { "element-react": "^1.3.1", "element-theme-default": "^1.4.8" },
npm install or yarn install
import 'element-theme-default'; //省略部分代码