标签: react-props

每个人。

所以我正在用 React.Js 学习 TypeScript，但我遇到了一个问题。

我有一个“页面”，其中包含一系列对象，其中包含有关每个用户的更多信息

const USERS = [
        {name: 'Nicole', id: 1, placeCount: 10, places: 'place 1', image: 'image source'},
        {name: 'Sarah', id: 2, placeCount: 20, places: 'place 3', image: 'asdasd'}
    ];

现在，我有一个用户页面，它呈现所有用户的列表，该列表是由 UsersListItem 组件组成的组件，现在该组件呈现 USERS 数组内每个对象的所有数据。我知道如何从 USERS 数组传递一个对象，但我想发送包含所有对象的整个数组

所以问题是如何将 USERS 数组传递到 UsersList 中？

这是我的结构

这是我的/用户页面

import UsersList from '../components/UsersList';


function User() {
    const USERS = [
        {name: 'Nicole', id: 1, placeCount: 10, places: 'place 1', image: 'image source'},
        {name: 'Sarah', id: 2, placeCount: 20, places: 'place 3', …

将带有 prop reload 的 AgentDialogBox 传递给 AgGridReactTable 组件

我是反应框架的初学者,所以我的问题对许多人来说可能是基本的.但请相信我,我一直坚持这一部分.我试图在按钮单击时获取文本框值并将值作为prop发送给其他函数.我能够提取文本框字段的值但是在click事件上,我收到一个错误'无法读取'undefined'的属性'props'.

以下是重点: -

1. termchange()用于提取输入文本值.
2. handleclick用于提取文本框值onclick事件.
3. oncitychange是一个函数,我将发送textbox的值(oncitychange()函数在不同的组件内).

先感谢您.

这是我的代码: -

import React,{ Component } from 'react';
import ReactDom from 'react-dom';
class SearchBar extends Component {
  constructor(props){
    super(props);
    this.state = {
      cityname:''
    }
  }

  render(){
    return(
      <div>
        <span>Enter the city: </span>
        <input type="text" id="txtbox" value={this.state.cityname} 
          onChange={event=>this.termchange(event.target.value)} />
        <input type="submit" onClick={this.handleclick} />
      </div>
    );
  }

  termchange(cityname){
    this.setState({cityname});
  }

  handleclick(){
    this.props.oncitychange(cityname);
  }
}

export default SearchBar;

我有一个像 Facebook 提要这样的帖子列表，每个帖子都有一个带有“编辑、删除、报告”的下拉菜单。

我使用 Ant Design UI，问题是我无法访问子菜单中的道具值“DeleteId”。

但是我可以访问组件内的道具值（deleteId）。

根据这里的Ant Design ，子菜单（menu）是在组件外声明的。

代码笔演示

//-------------- Outside Component --------------------

const onClick = function (info) {
  console.log(info)
};

const menu = (
  <Menu onClick={onClick}>

    { 
     // this.props.deleteId  <=== this doesn't work, props value is "undefined"
    }

    <Menu.Item key="1">Edit</Menu.Item>
    <Menu.Item key="delete-Id-here">Delete</Menu.Item>
    <Menu.Item key="3">Report</Menu.Item>
  </Menu>
);

//-------------- Inside Component --------------------

class Demo extends React.Component {
   render(){

     console.log("deleteId = "+ this.props.deleteId +" ( Inside component ) ")
// this.props.deleteId  <=== This props value works fine, …

快速反应本机问题，如何将道具从类通过SpeciesListItem传递给SpeciesDetail类？

我有一个Species类，该物种渲染一个物种列表，这些物种是它们自己的SpeciesListItem组件，可以通过传递道具进行渲染，但是，当单击列表项时，它需要使用for 转到SpeciesDetail页面，但是我该如何最后一点吗？propspopulation

这是我的工作：

种类

import React, {Component} from 'react';
import {ScrollView, StyleSheet, Switch, Text, TouchableHighlight, View} from 'react-native';

import SpeciesListItem from './SpeciesListItem';

import deerData from './deerDataJson';

export default class Species extends Component {
    constructor() {
        super();

        this.state = {
            deerData: deerData,
        }
    }

    render() {
        return (
            <ScrollView style={styles.pageContainer}>

                <TouchableHighlight onPress={() => this.props.navigation.navigate('SpeciesDetail')}
                                    style={styles.touchableHighlightButton}
                                    underlayColor={null}>
                    <SpeciesListItem deerData={this.state.deerData.fallowDeer}/>
                </TouchableHighlight>

            </ScrollView>
        );
    }
}

SpeciesListItem …

我正在使用名为react-window的库

当我像这样将道具传递到它的行时：

{Row({...props, {otherProps}})}

它给了我类似的错误：

React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：...

如何做到这一点的正确方法？