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

这篇具有很好参考价值的文章主要介绍了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';文章来源地址https://www.toymoban.com/news/detail-799379.html

到了这里，关于react自定义组件间的传值,if..else..判断,for循环(嵌套map使用),点击事件(Onclick),页面上事件实事传递参数（基础版）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！