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是react中非常特殊的道具，它故意不暴露给子组件。它是一种提供对其他信息的反应的方式，可用于优化性能，尤其是在处理列表时（请参阅this page）。如果您需要将信息公开给孩子，则需要将其作为其他道具传递（可以是关键道具的补充，也可以代替它）。例如：

// 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

添加带有构造函数的道具：

constructor(props) {
    super(props)           
}

在React Native中传递道具

3 个答案: