├── src ├── css │ └── style.css ├── index.js ├── Store │ └── index.js └── component │ ├── Son.jsx │ └── App.jsx ├── public ├── favicon.ico ├── manifest.json └── index.html ├── .gitignore ├── package.json └── README.md /src/css/style.css: -------------------------------------------------------------------------------- 1 | .son{ 2 | margin-top:15px; 3 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heyunzhen/React_Phone/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import ReactDom from "react-dom" 3 | import App from "./component/App" 4 | import "./css/style.css" 5 | import store from "./Store/index" 6 | import {Provider} from "react-redux" 7 | ReactDom.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ) -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/Store/index.js: -------------------------------------------------------------------------------- 1 | import {createStore} from "redux" 2 | 3 | 4 | var defaultstate={ 5 | name:[] 6 | } 7 | 8 | const store=createStore((state=defaultstate,action)=>{ 9 | 10 | var {type,payload}=action 11 | 12 | 13 | switch (type) { 14 | case 'my': 15 | return {...state,name:payload} 16 | default: 17 | return state 18 | 19 | } 20 | 21 | }) 22 | 23 | export default store -------------------------------------------------------------------------------- /src/component/Son.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | 4 | class Son extends React.Component{ 5 | constructor(props) { 6 | super(props) 7 | this.state={ 8 | name:"何运正" 9 | } 10 | } 11 | 12 | callback(){ 13 | this.props.callback('我的值') 14 | } 15 | 16 | render(){ 17 | return
{this.props.data}
18 | } 19 | } 20 | 21 | 22 | export default Son 23 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | 13 | React App 14 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "prop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.6", 7 | "react-dom": "^16.8.6", 8 | "react-redux": "^6.0.1", 9 | "react-scripts": "2.1.8", 10 | "redux": "^4.0.1" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /src/component/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Son from "./Son" 3 | import {connect} from "react-redux" 4 | class App extends React.Component{ 5 | constructor(props){ 6 | super(props) 7 | this.state={ 8 | list:"我们", 9 | data:['123','456'] 10 | } 11 | } 12 | componentDidMount(){ 13 | console.log(this.props) 14 | } 15 | send(){ 16 | this.setState({ 17 | list:"爸爸给你的值" 18 | }) 19 | this.props.dispatch({type:"my",payload:this.state.data}) 20 | } 21 | callback(msg){ 22 | console.log(msg) 23 | } 24 | render(){ 25 | return
26 | { 27 | this.props.state.name.length>0?this.props.state.name.map((item,index)=>{ 28 | console.log(item) 29 | return
  • {item}
    • 30 | }):"123" 31 | } 32 | 33 | 34 |
    35 | } 36 | } 37 | 38 | const mapStateToProps = (state) => { 39 | return{ 40 | state 41 | } 42 | 43 | 44 | } 45 | 46 | 47 | export default connect(mapStateToProps)(App) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## `这是一个React的组件通信的demo` 2 | 3 | ### `对于不是很了解组件通讯的同学来说这是一个福音，因为这个demo包含了所有的组件通讯的方法，相信聪明的你一定能快速上手` 4 | 5 | #### `克隆文件夹，安装依赖 使用行命令npm start 来查看这个demo` 6 | 7 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 8 | 9 | ### `你可以利用这些来做这些事情` 10 | 11 | ### `npm start` 12 | 13 | Runs the app in the development mode.
    14 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 15 | 16 | The page will reload if you make edits.
    17 | You will also see any lint errors in the console. 18 | 19 | ### `npm test` 20 | 21 | Launches the test runner in the interactive watch mode.
    22 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 23 | 24 | ### `npm run build` 25 | 26 | #### `利用 build 来打包` 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 35 | #### 你只有一次机会可以反编译，这是无法挽回的，编译之后可以来配置config文件等等，加快学习的步伐！ 36 | 37 | ## Learn More 38 | 39 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 40 | 41 | To learn React, check out the [React documentation](https://reactjs.org/). 42 | 43 | ### Code Splitting 44 | 45 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 46 | 47 | ### Analyzing the Bundle Size 48 | 49 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 50 | 51 | ### Making a Progressive Web App 52 | 53 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 54 | 55 | ### Advanced Configuration 56 | 57 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 58 | 59 | ### Deployment 60 | 61 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 62 | 63 | ### `npm run build` fails to minify 64 | 65 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 66 | --------------------------------------------------------------------------------