React条件渲染、列表渲染和组件传值

React中实现v-show

父组件

import React from "react";
import Child4 from "./components/Child4"
// 用react实现vue中v-show
class App extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            flag:true
        }
    }
    toggleFn = () => {
        this.setState({
            flag:!this.state.flag
        })
    }
    render() {
        return (
            <div>
                <button onClick={this.toggleFn}>点击切换toggle</button>
                <h1 style={{ display: this.state.flag ? 'block' : 'none' }}>显示</h1>
                <Child4 v-show={this.state.flag}></Child4>
            </div>
        )
    }
}
export default App

子组件

//类组件写法
import React from "react";
export default class App extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
        }
    }
    render() {
        return (
            <div style={{display:this.props['v-show']?'block':'none'}}>
                <h3>我是child4组件</h3>
            </div>
        )
    }
}

//函数组件
export const Child3 = (props) => {
//props['v-show'],因为react中不支持带-的写法，无法直接props.v-show
    return (
        <div style={{display:props['v-show']?'block':'none'}}> 
            <h1>我是子组件{ props.name }</h1>
        </div>
    )
}

React中实现v-if

React中的条件渲染就是v-if

class App4 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: true
    };
  }
  render() {
    let { isLoggedIn } = this.state;//false
    let AuthButton;
    if (isLoggedIn) {
      AuthButton = <button>Logout</button>;
    } else {
      AuthButton = <button>Login</button>;
    }
    return (
      <div className="App">
        {AuthButton}
      </div>
    );
  }
}

React中实现组件传值

父传子

【步骤】

• 父组件提供要传递的 state 数据
• 给子组件标签添加属性，值为 state 中的数据
• 子组件中通过 props 接收父组件中传递的数据
  • 函数组件通过参数 props 接收数据
  • 类组件通过 this.props 接收数据
• props 是只读的，不允许修改 props 的数据

//父组件
import React from "react";
import Child2 from "./components/Child2"
export default class App extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            name:'Bob'
        }
    }
    render() {
        return (
            <div>
                <h1>父组件</h1>
                <Child2 name={this.state.name} ></Child2>
            </div>
        )
    }
}


//子组件
import React from "react";
export default
    class App extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
        }
    }
    render() {
        return (
            <div>
                <h3>{this.props.name}</h3>
            </div>
        )
    }
 }

子传父

【步骤】

• 父组件提供一个回调函数（用于接收数据）
• 将该函数作为属性的值，传递给子组件
• 子组件通过 props / this.props 调用回调函数
• 将子组件的数据作为参数传递给回调函数

//子组件
import React from "react";
export default
    class App extends React.Component{
    constructor(props) {
        super(props)
        this.state = {  
        }
    }
    //子传递给父组件，通过回调函数传值
    childrenFn = () => {
        this.props.getMsg('梅西')
    }

    render() {
        return (
            <div>
                <button onClick={ this.childrenFn }> 子组件button </button>
            </div>
        )
    }
 }

//父组件
import React from "react";
import Child2 from "./components/Child2"
export default class App extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
        }
    }
    //通过回调函数接收子组件传递过来的值
    getChildMsg = (msg) => {
        console.log('子传给父的值',msg);
    }
    render() {
        return (
            <div>
                <h1> 父组件 </h1>
                <Child2 getMsg = { this.getChildMsg }></Child2>
            </div>
        )
    }
}

兄弟传值

【步骤】

• 父组件提供一个回调函数（用于接收数据）
• 将该函数作为属性的值，传递给子组件
• 子组件通过 props / this.props 调用回调函数
• 将子组件的数据作为参数传递给回调函数
• 父组件在回调函数中把参数赋值给 state 中状态值
• 父组件中把状态值 作为属性值传递给另外一个子组件
• 另外一个子组件 通过 props / this.props 接收

// 兄弟组件之间的传值
const Brother1 = (props) => {
  return (
    <h1>计数器：{props.count }</h1>
  )
}

const Brother2 = (props) => {
  return (
    <button onClick={props.AddNum}>点击+1</button>
  )
}

class Counter extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      count:0
    }
  }

  AddNum = () => {
    this.setState({
      count:this.state.count+1
    })
  }

  render() {
    return (
      <div>
        <Brother1 count={this.state.count}></Brother1>
        <Brother2 AddNum={this.AddNum}></Brother2>
      </div>
    )
  }
}

跨组件传值

【步骤】

• 调用 React.createContext() 创建 Provider（提供数据） 和 Consumer（消费数据） 两个组件。
• 使用 Provider 组件作为父节点
• 设置 value 属性，表示要传递的数据
• 调用 Consumer 组件接收数据。

//跨组件传值
const { Provider, Consumer } = React.createContext()
class App14 extends React.Component {
  render() {
    return (
      <Provider value={{
        a:'cluo',
        b:'meixi'
      }}>
        <div>
          我是APP2
          <Child11 />
        </div>
      </Provider>

    )
  }
}

const Child11 = props => {
  return (
    <div>
      <h1>我是child11</h1>
      <Consumer>
      {
        data111=><h1>我是child12 -- {data111.a }</h1>
      }
      </Consumer>
      <Child12 />
    </div>
  )
}


const Child12 = props => {
  return (
    <div>
      我是child12
      <Consumer>
      {
        data111=><h1>我是child12 -- {data111.b }</h1>
      }
      </Consumer>
    
    </div>
  )
}