Question

在受控组件中，如何将任意道具传递给渲染函数？我想我需要使用一个构造函数，但我得到了＆＃34;道具没有定义＆＃34;和其他错误。

import * as React from 'react';
import { View } from 'react-native';

import styles from './Styles';

export default class MyView extends React.Component {

  constructor(????) {
    // What do I do so I can use {...props} in the render function below?
  }

  render() { 
    return (
      <View style={styles.wrap} {...props}>
        <View style={styles.main}>
          {this.props.children}
        </View>
      </View>
    );
  }
};

我希望能够......

<MyView arbitraryprop="123" />

...并将任意传递给MyView :: render（）。

Answer 1

<Component>的默认构造函数已初始化this.props。如果你在组件的构造函数中唯一要做的就是初始化你的道具，你可以完全抛弃构造函数。否则你必须使用props调用超级构造函数：

constructor(props) {
    // call the super constructor
    super(props);

    // do your additional initialization, e.g. set initial state
}

此外，由于您未在props函数中初始化局部变量render()，因此您的示例无法正常工作。它必须看起来像这样：

render() { 
    const {children, ...props} = this.props;

    return (
      <View style={styles.wrap} {...props}>
        <View style={styles.main}>
          {children}
        </View>
      </View>
    );
}

Answer 2

引用道具时必须使用适当的范围。换句话说，这是一个类，因此props未在渲染函数中定义，但this.props是。this.。将{...this.props}添加到开头即可。（例如<View style={styles.wrap} {...this.props}>

如何使用JSX spread属性将任意道具传递给我的受控组件？

3 个答案: