标签: react-props

假设我有一个组件，它将一个元素作为名为 customHeader 的 prop：

const Example = ({ children, customHeader }) => {\n  ...some code  \n\n  return (\n    <>\n      {customHeader ? customHeader : <div>Default Header</div>}\n      {children}\n    </>\n  );\n}\n

然后，在使用该Example组件的地方，我执行以下操作：

<Example customHeader={<div>blah</div>}>\n  <div>children</div>\n</Example>\n

到目前为止，这是相当标准的东西，一切正常，但我遇到的问题是，我希望能够customHeader通过执行类似的操作来获取元素的尺寸customHeader.clientHeight，但这是行不通的。当我console.log这样做时，我打印出了这个对象：

{\n  $$typeof: Symbol(react.element)\n  key: ".0"\n  props: {children: 'Blah'}\n  ref: null\n  type: "div"\n  _owner: FiberNode {tag: 0, key: null, stateNode: null, elementType: \xc6\x92, type: \xc6\x92, \xe2\x80\xa6}\n  _store: {validated: false}\n}\n

有没有办法将作为 prop 传递的 JSX 元素转换为“普通”HTML …

我正在使用reactprime TreeSelect。我想通过编辑名为 的变量来创建一个数组returnArray，并通过 props 将其发送到主组件的状态。但onChange似乎未定义。相同的过程正在工作OnValueChanged。

主要组成部分：

return(
          <SubComponent>
            onChange={(val) => {
              console.log("here")
            if (val)
              setFormDataDetails({
                ...formDataDetails,
                [item.NS_CI_ID]: val,
              });
          }}
          </SubComponent>
);

子组件：

  const nodeStateCh = (e) => {
    setSelectedNodeKeys(e.value)
    let rArray= []
    rArray.push("test")
    if (props.onChange) {  //undefined...
      props.onChange(returnArray)
    }
    
  }



  return (
    <div className="card flex justify-content-center">
      <TreeSelect
        value={selectedNodeKeys}
        onChange={nodeStateCh}
        options={nodes}
        metaKeySelection={false}
        filter
        className="md:w-20rem w-full"
        selectionMode="checkbox"
        display="chip"
        placeholder="Select Items"
      >
        {' '}
      </TreeSelect>
    </div>
  )

我正在使用子“行”和“按钮”组件动态构建我的“屏幕”。我只使用这种方法是因为我找不到可用于 react-native 的 flex-flow 属性。

所以基本上我是通过数组数组映射来构建每一行，并在行内映射通过每个数组来构建每个按钮。因为需要在按钮中设置 onPress，所以我传递每个的 URL onPress{() => this.props.navigation.navigate({navigationURL})

作为道具，首先到行，然后到按钮。问题是我不断收到错误'Cannot read property 'navigation' of undefined。我确定这是因为只有导航器中的实际“屏幕”才能访问导航道具。我也试过通过

navigation={this.props.navigation}

但没有成功。我浏览了所有文档，似乎找不到任何有用的东西。有没有其他人遇到过类似的情况？

一个新的反应本机，我有2个js文件（组件）。该文件的1是模式jsx，我想从其他js文件中打开此模式。

模态JS文件

import React, {Component} from 'react';
import {    Platform, Text,View, StyleSheet, TouchableOpacity} from 'react-native';
import Modal from 'react-native-modal';
import {    Icon,
            Picker,
            Form,
            Item,
            Button,
            Input} from 'native-base';

export default class MyPopup extends Component{ 
     state = {
        isModalVisible: this.props.isModalVisible
      };
      constructor(){
        super(); 
      }    
  render() {
    return (
        <View style={styles.container}>  
          <Modal isModalVisible={true}>
              onRequestClose={() => this.closeModal()}>

              <View style={styles.headerContent}>
                <View style={styles.headerItems}>
                    <Icon name='md-grid' />
                    <Text style={styles.headerText}>Version Mail</Text>
                </View>
              </View>   

              <View style={styles.modalContainer}>
                 <View style={styles.titleRow}>
                    <View style={styles.titleText}>
                        <Text>Book:</Text>
                        <Text> MAIN Reader</Text>
                    </View>
                    <View style={styles.titleTableText}> …

我正在构建一个React组件，该组件会延迟其子级的卸载以为其设置动画。卸载时，我想传入一个额外的道具（例如，数据属性或类名）以处理动画。

这是一般情况的特定实例，在该情况下，我想覆盖子级的某些属性。我已经意识到，遵循模式完全可以实现我想要的功能：

this.props.children.map(child => 
    <child.type key={child.key} 
                ref={child.ref}
               {...child.props} 
               // add my props into children here
               data-leaving={true} />)

我没有返回子元素，而是返回了一个具有相同类型和相同道具的新元素。然后，我可以添加或删除我想要的任何道具！

但是，这没有记录，并且感觉很hacky。我想知道这是否在每种情况下都可以安全使用。

请注意，我知道其他方法（例如，接受一个可以直接返回子级而不是子级的函数），但这提供了迄今为止最方便的接口。

假设我有一个这样的组件：

<TouchableOpacity activeOpacity={1} />

在某些情况下，我想添加一个属性pointerEvents或类似的东西：

<TouchableOpacity pointerEvents={'box-none'} activeOpacity={1} />

最近，我通过设置一个变量并将其传递给基于一些内部状态的组件来实现这一点，如下所示：

render() {
    const pointerType = this.state.isVisible ? 'box-none' : 'box-only';
    return (
       <TouchableOpacity pointerEvents={pointerType} activeOpacity={1} />
    )
}

但是，在某些情况下，这并不理想，我想知道是否有一种方法可以像这样动态包含属性：

render() {
    const pointerJSX = this.state.isVisible ? {pointerEvent:'box-none'} : null;
    return (
       <TouchableOpacity {pointerJSX} activeOpacity={1} />
    )
}

我对 React 比较陌生，正在开发 John Conway - Game of Life 应用程序。我Gameboard.js为棋盘本身（它是 的子项App.js）构建了一个功能组件，以及一个Square.js代表棋盘中单个方块的功能组件（并且是 的子项Gameboard和孙子App）。

在App我有一个调用的函数alive，当用户单击它时，我想更改单个方块的颜色。App也有一个 'alive' 属性，它的状态最初设置为 false，并alive在调用时将该属性更改为 true。

这是App.js：

import React, { Component } from 'react';
import './App.css';
import GameBoard from './GameBoard.js';
import Controls from './Controls.js';

    class App extends Component {
      constructor(props){
        super(props);

        this.state = {
          boardHeight: 50,
          boardWidth: 30,
          iterations: 10,
          reset: false,
          alive: false
        };
      }

      selectBoardSize = (width, …

我正在开发一个具有以下组件层次结构的应用程序(礼貌ProReact)

KanbanContainer => KanbanBoard => List => Card => CheckList

KanbanContainer包含需要传递给CheckList组件的方法(因为该组件具有所有ui控件).KanbanContainer中的方法定义如下

class KanbanBoardContainer extends Component {
  state = { cards: [] };

  componentDidMount() {
    this.setState({ cards: API.getTasks() });
  }
  addTask = (cardId, taskName) => {
    console.log(taskName, " invoked for cardId =", cardId);
  };
  deleteTask = (cardId, taskId, taskIndex) => {
    console.log("deleteTask invoked for cardId = ", cardId);
  };
  toggleTask = (cardId, taskId, taskIndex) => {
    console.log("toggleTask invoked fpr cardId = ", cardId);
  };

  render() {
    return (
      <KanbanBoard
        cards={this.state.cards}
        taskCallbacks={{ …

据我对Javascript的正确理解，我们有两种不同的传递方式：按值传递和按引用传递。按值表示传递字符串或数字的时间。通过引用传递对象或数组时。

上次在某个项目中，我注意到反模式->有人为 this.props.arrayOfNames = newArrayOfNames;

我还没有机会进行测试，但是...它会以某种方式改变父母的对象吗？引用？

我有一个子组件PatientRow，它正在从其父对象的props中接收映射的患者数组ObsTabel。奇怪的是，PatientRow从未渲染，我也无法在React Dev工具上找到PatientRow组件。另一方面，如果我只是通过患者数组，则将其映射PatienRow到组件中即可渲染，但这不是我想要的。我想将数组映射为ObsTabel＆传递给数组，PatientRow以便行是具有各自状态的单个组件。如果您能找到我的错误，请告诉我。注意：ObsTable有一个父组件，从该组件接收作为道具传递的患者数组。文件结构-ParentComponent(with patient array).js>ObsTable.js>PatientRow.js

This doesn’t exist in DOM 

export default class PatientRow extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            disabled: false
        };

    }

    render() {

        const { id, label, name, room, timestamp, observationLevel, roomStatus, patient, index } = this.props;
        console.log(this.props);

        return (
            <tbody>

                <tr key={id} >
                    <td>{label}</td>
                    <td>{name}</td>
                    <td>{observationLevel}</td>
                    <td>{roomStatus}</td>
                    <td>{timestamp} </td>

                    <td>


                        <div>
                            <Button> Awake </Button>
                            <Button>Asleep/Breathing</Button>
                        </div>

                        <Button> View Room </Button>

                        <div>
                            <Button>Awake </Button> …