标签: react-props

我有一个看起来像这样的组件。这个版本完美运行：

export default function StatusMessage(isAdded: boolean, errorMessage: string) {
  if (isAdded) {
    return <ResultAlert severity="success" text="User Added" />;
  } else {
    if (errorMessage !== '') {
      if (
        errorMessage.includes('email')
      ) {
        return <ResultAlert severity="error" />;
      }
      if (
        errorMessage.includes('phone number')
      ) {
        return (
          <ResultAlert severity="error" text="" />
        );
      } 
    }
  }
}

现在，我正在尝试更改导出它的方式。我正在尝试这个：

type StatusMessageProps = {
  isAdded: boolean; 
  errorMessage: string;
}

export const StatusMessage: React.FunctionComponent<StatusMessageProps> = ({
  isAdded,
  errorMessage
}) => {

但我不断收到错误消息：

Type '({ isAdded, errorMessage }: …

根据应用程序目录的Next.js文档：

“只要有可能，我们建议在服务器组件内获取数据。服务器组件始终在服务器上获取数据。”

这很棒，因为我正在使用外部 API（我无法更改 CORS 策略 - 允许来源...）。

我有一个带有表单（客户端组件）的页面（服务器组件），我正在尝试使用服务器组件访问 API。

主页

import Form from './Form';

export default function Home() {
   handleSubmit = () => {...submit logic}
   return <Form onSubmit={handleSubmit} />
}

表单组件

'use client'

export default function Form({ onSubmit }) {
 return <form onSubmit={handleSubmit}>...</form>
}

当我尝试将该handleSubmit函数传递给客户端组件时，出现以下错误：

Functions cannot be passed directly to Client Components because they're not serializable.

1. 我不确定这是什么意思。
2. 有没有办法将函数传递给客户端组件？
3. 我需要从服务器组件获取数据，因为 API 有 CORS 策略。是否有可能做我想要完成的事情？

我正在尝试从“开放数据”中提取数据以建立快速热图。在此过程中，我想添加一些统计信息。几乎所有东西都运行良好，因为我有数据并能够渲染地图，但是我不确定一旦获得数据就如何处理计算，因为要花一些时间才能输入数据。如何设置东西以便如果尚未接收到数据，我可以在状态变量上运行一个函数吗？目前，我将零作为道具传递给StatCard的数字。

以下是我的尝试：

App.js

  import React, { Component } from 'react';
import Leaf from './Leaf';
import Dates from './Dates';
import StatCard from './StatCard';
import classes from './app.module.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data:[],
      cleanData:[],
      dateInput: '2019-10-01',
      loading: false,
      totalInspections: null,
      calculate: false
    };
  }

  componentDidMount() {
    try {
      this.fetchData();
    } catch (err) {
      console.log(err);
      this.setState({
        loading: false
      })
    }
  }


  fetchData=()=>{
    const requestData = async () => {
      await fetch(`https://data.cityofnewyork.us/resource/p937-wjvj.json?$where=latitude > 39 AND …

我见过两种在 React 中解构 props 的方法。

    function MyComponent({name,age,height}){
            // do stuff here
    }

或者

    function MyComponent(props){
            const {name,age,height} = props
            // do stuff here
    }

假设这个组件被用作

<MyComponent name="bob" age={25} height = {175} haspets={false}/>

这是我的问题：

如果我使用第一种解构方式，是否意味着我将无法访问其他专业人士，在这种情况下 haspets

这两种方式的优缺点是什么？

父组件：

const initialValue_modalProps = [
    { show: false, response: "" }
  ];
const [modalProps, setModalProps] = useState(initialValue_modalProps)
const passedFunction = () => {
    setModalProps(modalProps => initialValue_modalProps);
  }
..
..
 <div>
        <Modal show={modalProps.show}
          response={modalProps.response}
          passedFunction={passedFunction}></Modal>
 </div>

子组件：

export default function ModalComp(props) {
    const [modalOpen, setmodalOpen] = useState(true);
    console.log('modalOpen', modalOpen);
    if (props.show === false || modalOpen === false) {
        return null;
    }
    return (<Modal isOpen={props.show}>
        <ModalHeader>Deployment Status</ModalHeader>
        <ModalBody>{props.response}</ModalBody>
        <ModalFooter>
            <Button onClick={() => {
                setmodalOpen(modalOpen => false);
                props.passedFunction();
            }}>Close</Button>
        </ModalFooter>
    </Modal>)

}

这里我想把Function函数从Parent传递给child，这样子组件就可以执行它来重置parent中的状态

我正在学习如何使用道具。在用我的母语或英语进行研究后，我最终无法为我的问题找到正确的答案。请告诉我为什么这会引发错误。这是 App.js 文件（默认）

import React from 'react';
import './App.css';
import Product7 from './componentep7/Product7';

function App() {
  return (
    <div>
    <nav className="navbar navbar-inverse">
      <div className="container-fluid">
        <a className="navbar-brand" >Title</a>
      </div>
    </nav>
    <div className="container">
<div className="row">
  <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">


  
    <Product7 name="valiant"/>

    

  </div>
</div>

    </div>
    </div>
    )
}

export default App;

这是组件文件 (Product7.js) 一切正常，只是它在 {this.props.name} 处返回了错误

import React from 'react';


function Product7() {
  return (
    <div>
    <div className="col-xs-5 col-sm-5 col-md-5 col-lg-5">
      <a className="thumbnail">
        <img src="https://yuzu-emu.org/images/game/boxart/hollow-knight.png" alt="5tr"/>
      
      </a>
      <div className="caption">

<h4>{this.props.name}</h4>

     
      <a className="btn …

我正在创建一个可重用的组件按钮，我想将两个 Tailwind 类作为道具传递给该按钮并动态使用它们。

这是我的组件：

function Button({ primary, secondry, label, onClick }) {
  return (
    <button
      onClick={(e) => onClick(e)}
      className={`bg-${primary} py-0.5 px-3 rounded text-white font-semibold text-xl border-2 border-${primary} hover:bg-${secondry} hover:text-${primary} cursor-pointer duration-300`}
    >
      {label}
    </button>
  );
}

这就是我使用该组件的方式：

<Button
label={"Cancel"}
primary="red-700"
secondry="zinc-900"
onClick={(e) => navigate("/customers")}
/>

然而，这些课程并未被应用。它看起来是这样的：

我可以props使用传播运算符进行传递.即

<Component x={props.x} y={props.y} />

等于:

<Component {...props} />

我们可以在具有相同名称的组件定义中使用它.

我的问题是如何传递这样的函数？下面的等效代码是什么？

<Component handleClick = {this.handleClick} 
   anotherHandleClick = {this.anotherHandleClick}/>

编辑:

上面的行将向下传递函数handleClick并anotherHandleClick传递给孩子.有没有这样的东西<Component {...Fns} />,每个函数将作为具有相同名称的道具传递.

我有一个全局服务widgetService,其中包含许多小部件的数据,每个小部件都由一个小部件标识widgetID.每个小部件的数据都可以随时更改.我想用React组件显示一个小部件WidgetReactComponent.

react组件应将小部件ID作为属性,并从小部件服务中获取要显示的信息.可以使用该方法从窗口小部件服务查询窗口小部件的数据getWidgetData(widgetID).并且为了能够发布数据更改,它还提供了两种方法:addListenerForWidget(widgetID, listener)和removeListenerForWidget(widgetID, listener).

当假设属性设置一次但从未改变时,可以按照React的建议这样实现:

class WidgetReactComponent extends Component {
    constructor() {
        super();
        this.state = {
            data: widgetService.getWidgetData(this.props.widgetID)
        };
        this._onDataChange = this._onDataChange.bind(this);
    }

    _onDataChange(newData) {
        this.setState({data: newData});
    }

    componentDidMount() {
        // React documentation: "This method is a good place to set up any subscriptions."
        widgetService.addListenerForWidget(this.props.widgetID, this._onDataChange);
    }

    componentWillUnmount() {
        // React documentation: "Perform any necessary cleanup in this method, such as [...] cleaning up any subscriptions that were …

我第一次使用React Context API.我有一个表生成客户列表.最初,我将客户端存储在一个状态的数组中,并且在同一页面中,我有一个根据点击对客户端进行排序的功能.

我已经将客户端移动到上下文而不是表格的实际页面的状态,但现在我的排序函数当然不再有效.我需要做的是使用相同的函数,但组织处于上下文状态的数组.

原功能:

onSortClient = column => e => {
        const direction = this.state.sort.column
            ? this.state.sort.direction === "asc"
                ? "desc"
                : "asc"
            : "desc";
        const sortedData = this.state.clients.sort((a, b) => {
            if (column === "client_name") {
                const nameA = a.client_name.toUpperCase();
                const nameB = b.client_name.toUpperCase();
                if (nameA < nameB) {
                    return -1;
                }
                if (nameA > nameB) {
                    return 1;
                }

                return 0;
            }
            return 0;
        });

        if (direction === "desc") {
            sortedData.reverse();
        }

        this.setState({
            clients: sortedData,
            sort: { …