React【基础--组件-传值】

基础

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

组件

创建（在js文件中书写）

import React from 'react' //必须导入React 且首字母要大写
function tab(){
    return(
        <div>
            <ul>
                <li>全部</li>
                <li>精华</li>
                <li>分享</li>
                <li>问答</li>
            </ul>
        </div>
    )
}
export default tab

也可以使用下面这种方法

import React from 'react'
class btn extends React.Component {
    // constructor(){
    //     super()
    // }
    fun(){
        console.log('这是个按钮')
    }
    // 写react函数时必须有render函数
    render(){ 
        return <button>按钮</button>
    }
}
export default btn  

import React from 'react';
import Tab from './components/tab/tab'
import Btn from './components/button/button'
import './App.css';
function App() {
  return (
    <div className="App">
      <Tab></Tab>
      <Btn></Btn>
    </div>
  );
}

export default App;

数据传值

state与props区别
state可以修改 但props是传过来的无法修改

import React from 'react'
class btn extends React.Component {
    constructor(props){ //数据传值
        super(props)
        this.state ={
            msg:'点击'
        }
    }
    fun(){
        console.log('这是个按钮')
    }
    // 写react函数时必须有render函数
    //{}是React渲染变量的方法
    render(){ 
        return <button>{this.state.msg}</button>
    }
}
export default btn  

import React from 'react'
import './tab.css'
function tab(){
    const text='全部'
    return(
        <div className="tabBox">
            <ul className="tabList">
                <li>{text}</li>
                <li>精华</li>
                <li>分享</li>
                <li>问答</li>
            </ul>
        </div>
    )
}
export default tab

props传值（静态）

在父组件上写静态数据

import React from 'react';
import Tab from './components/tab/tab'
import Btn from './components/button/button'
import './App.css';
function App() {
  
  return (
    <div className="App">
      <Tab></Tab>
      <Btn text={"搜索"}></Btn>
      <Btn text={"点击"}></Btn>
      <Btn text={"确定"}></Btn>
    </div>
  );
}
export default App;

子组件中接收

import React from 'react'
class btn extends React.Component {
    constructor(props){ //数据传值
        super(props)
        this.state ={
            msg:this.props.text
        }
    }
    fun(){
        console.log('这是个按钮')
    }
    // 写react函数时必须有render函数
    //{}是React渲染
    render(){ 
        return <button>{this.state.msg}</button>
       //或者直接在这里写 <button>{this.props.text}</button>
    }
}
export default btn