通过反应天然中的道具

Question

我有此组件：

<View style={{backgroundColor: solved === true ? 'green' : '#ff5b68'}}>
    <Text>{error}</Text>
    <Text>{errorInfo}</Text>
    <Text>{key}</Text>
    <Text>{uid}</Text>
    <MarkedAsSolvedButton key={key}/>
</View>

，我想将密钥传递给MarkedAsSolvedButton组件。下面的代码：

export default class MarkedAsSolvedButton extends React.Component {
    componentWillReceiveProps(nextProps) {
        alert(nextProps.key)
    }
    handlePress = () => {
        alert(this.props.key);
    };
    render() {
        return (
            <Button onPress={this.handlePress} title={'Marked as solved' + this.props.key}/>
        );
    }
}

但是，当我尝试查看键时，它说undefined。但这给了我父组件中的值。

我缺少什么？

Answer 1

key是一个非常特殊的道具，故意不是暴露于子女组件。它的存在是一种提供反应的方式，它可以用来优化性能，尤其是在处理列表时（请参阅此页面）。如果您需要将信息暴露于孩子，则需要将其作为不同的道具传递（这可能是补充关键道具，或者代替了）。例如：

// In the parent component's render:
<MarkAsSolvedButton key={key} identifier={key} />
// in MarkAsSolved:
handlePress = () => {
  alert(this.props.identifier);
}

Answer 2

onPressButton(){}
render() {
    return (
     <ChildrenComponent
      name={"testing to props"}
      onFunction={this.onPressButton.bind(this)}
      key={this.state.key}
    />
    );
}

和儿童组成部分

<View>
    <Button onPress={()=>this.props.onFunction(this.props.key)}>
      <Text>{this.props.name}</Text>
    </Button>
</View>

您可以在渲染后与不同的道具这样使用，您可以调用道具

Answer 3

添加props的构造函数：

constructor(props) {
    super(props)           
}