时间戳

首页 > 解决方案 > 如何使用 React 渲染 html 按钮的新组件 onClick？

javascript - 如何使用 React 渲染 html 按钮的新组件 onClick？

问题描述

我有一个包含 html 按钮的组件，单击该按钮时需要调用一个函数，该函数呈现另一个组件并将新组件的状态设置为传递给返回新组件的函数的参数。我设置了一个用字符串“start”初始化的状态变量。当点击 html 按钮时，状态变量应该改变并且新组件需要被渲染。在我的应用程序中，页面未加载，并且在我尝试在代码和框中制作的最小可重现示例中，状态变量甚至不会使用“开始”字符串进行初始化

import Member from "./member.js";
import { React, useState } from "react";

const Post = () => {
  const [start, setStart] = useState("start");

  const getProfile = (member) => {
    //    const addr = dispatch({ type: 'ADD_MEMBER', response: member })
    console.log(member);
    setStart(member)
    return <Member user={member}></Member>;
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => getProfile('ssssss')}>Profile</button>
    </div>
  );
};

export default Post;

这是我需要在点击时呈现的组件

import { React, useState } from "react";
const Member = (props) => {
    const [user, setUser] = useState({});

    return (
      <div class="container">
lolololololololololololololo
      {this.user}
      </div>
    )
  }
  
  export default Member;

沙盒

标签： javascriptreactjs

解决方案

你的代码有很多问题。

  1. 如评论中所述，您不能在功能组件之外使用钩子。
  2. 通过从getProfile函数返回一个组件，您没有做任何事情，因为该组件没有指定的渲染位置。
  3. start变量在您的情况下是无用的，因为您不会在任何地方更改它。
  4. 在您的Member 组件中，您使用的this.user在功能组件中是错误的。这仅在类组件中使用

您的代码的某种工作版本可能是这样的：

import Member from "./member.js";
import { React, useState } from "react";

const Post = () => {
  const [data, setData] = useState('');

  const getProfile = (member) => {
    //    const addr = dispatch({ type: 'ADD_MEMBER', response: member })
    setData(member);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => getProfile('Johny')}>Profile</button>
      {data && <Member user={data}></Member>}
    </div>
  );
};

export default Post;

import { React, useState } from "react";

const Member = (props) => {
  const [user, setUser] = useState(props.user);

  return (
    <div class="container">
      lolololololololololololololo
      {user}
    </div>
  );
};

export default Member;

本质上，当单击按钮时，值会发生变化并且不再是虚假的，因此会渲染成员组件并将值作为道具从数据变量中获取。

推荐阅读