【React js的单项传参与双向传参】

单向传参

效果图：

1.在组件代码内添加事件函数，多个标签需用 div 标签包含住

import React from "react";
//导入Css样式
import "./变量组件.css";
//变量组件
/*
*注意function里不能修改参数值，应采用class类的方式进行传值
*/
const Variate = (Variate) => {
   
    return (
        <div>
            <p className="module_style">姓名:{
   Variate.name}<br />年龄:{
   Variate.age}</p>
            <button onClick={
   Variate.点击事件}>确定</button>
        </div>

    )
}

export default Variate;

<button onClick={Variate.点击事件}>确定</button>

2.在app.js中设置事件函数，并且在标签内加入对应事件属性

//以类的方式传值需要在导入React时加入组件文件夹名称,{组件文件夹名称}
import React, {
    Component } from 'react';
import './App.css';
import Variate from './Component/变量组件/变量组件';
/*
*以类实现
*/
class App extends Component {
   

  //变量对象
  starts = {
   
    Variate: [
      {
    id: 1, name: "张三", age: "19" },
      {
    id: 2, name: "李四", age: "20" },
      {
    id: 3, name: "王麻子", age: "22" },
    ]
  }

  事件函数 = () => {
   
    console.log("无传参事件")
  }

  传参事件函数 = (参数) => {
   
    console.log("参数是：", 参数)
  }

  //render()渲染函数
  render() {
   
    //代码内实现样式设置
    const my_style = {
   
      color: 'red',
    }

    return (
      <div className="App">
        <p style={
   my_style}>您好！欢迎您！</p