react自定义组件间的传值,if..else..判断,for循环(嵌套map使用),点击事件(Onclick),页面上事件实事传递参数（基础版）

9.自定义组件间的传值

    //引入全局参数
    import imageUrl from '../../images/winter.jpg';
    //自定义图片参数方法
    const user = {
      name: 'Hedy Lamarr',
      imageSize: 90,
    };
    //写入图片方法
    function Image() {
      return (
        <div>
          <p>{user.name}</p>
          <img src={imageUrl} 
           alt={'Photo of ' + user.name}
           style={{
              width: user.imageSize,
              height: user.imageSize
            }}
          />
        </div>
      )
    }
    //页面自定义组件上的名称
    function MyButton() {
      return (
        <button>I'm a button</button>
      );
    }
    
    export default class Fourzerofour extends Component {
      render() {
        return (
          <div>
             //书写到页面的样式
            <MyButton/>
            //引入图片
            <Image/>
          </div>
        )
      }
    }

10.if..else..判断

    var concat = {
      data:1
    }
    
    //if..else..判断
    function Ifelse(){
      if(concat.data<0){
        concat.data = concat.data+1
      }else{
        concat.data = concat.data-1
      }
      return(
        <div>{concat.data}</div>
      )
    }

    或者--------------------

    function Ifelse(){
      return(
        <div>{concat.data>0?concat.data = concat.data+1:concat.data = concat.data-1}</div>
      )
    }

11.for循环(嵌套map使用)

 var arr = [{ title: 'Cabbage', id: 1, isfine:1 },{ title: 'Garlic', id: 2, isfine:0 },{ title: 'Apple', id: 3, isfine:1 }];
    function For(){
      return(
        <div>
          {arr.map((item,index)=>{
            return(
              <div key={index} style={{color:item.isfine == 1?'red':'green'}}>{item.id}{item.title}</div>
            )
          })}
        </div>
      )
    }

12.点击事件(Onclick)

    function MyButton() {
      function ClickButton() {
        alert('Button clicked!');
      }
      return (
        <button onClick={ClickButton}>I'm a button</button>
      );
    }

13.页面上事件实事传递参数

   //先引入方法
   import { useState } from 'react';
   function Transmit(){
     //      事件    方法     
     const [count, setCount] = useState(0);
     function handleClick() {
       setCount(count + 1);
     }
     return(
       <button onClick={handleClick}>你点击了我{count}次</button>
     )
   } 

14.关于export default function App()与export function App()的区别

? ?export default不需要{} ? ? ?import ?Gallery from './Gallery.js';

? ?export function需要{} ? ? ? import {Gallery} from './Gallery.js';