Question

所以我到处都在寻找解决方案，但是没有运气。

我正在尝试将父React组件的this.state.nextID作为属性传递给子组件。但是，当我尝试访问子级中的该属性时，该属性为null。我正在使用Material-UI进行反应，并且我认为问题出在withStyles函数上，因为当我检查页面的源代码时，我看到了key节点上的withStyles(ServerBlock)属性。但是，该节点的子节点为ServerBlock，没有key属性。我在做什么错了？

ConfigBlock.js

class ConfigBlock extends Component {
  constructor () {
    super()
    this.state = {
    children: [],
    nextID: 0
    }
    this.handleChildUnmount = this.handleChildUnmount.bind(this);
  }
  handleChildUnmount = (key) => {
    console.log(key)
    this.state.children.splice(key, 1);
    this.setState({children: this.state.children});
  }
  addServerBlock() {
    this.state.children.push({"id": this.state.nextID, "obj": <ServerBlock unmountMe={this.handleChildUnmount} key={this.state.nextID} />})
   this.setState({children: this.state.children})
    this.state.nextID += 1
  }
  addUpstreamBlock() {
    this.state.children.push({"id": this.state.nextID, "obj": <UpstreamBlock unmountMe={this.handleChildUnmount} key={this.state.nextID} />})
    this.setState({children: this.state.children})
    this.state.nextID += 1
  }
  render () {
    const {classes} = this.props;
    return (
      <div className={classes.container}>
        <Card className={classes.card}>
          <CardContent>
            <Typography className={classes.title} color="primary">
              Config
            </Typography>
                <div>
              {this.state.children.map((child, index) => {
                return (child.obj);
              })}
            </div>
          </CardContent>
          <CardActions>
            <Button variant="contained" color="primary" className={classes.button} onClick={ this.addServerBlock.bind(this) }>
              Server
              <AddIcon />
            </Button>
            <Button variant="contained" color="primary" className={classes.button} onClick={ this.addUpstreamBlock.bind(this) }>
              Upstream
              <AddIcon />
            </Button>
          </CardActions>
        </Card>
      </div>
    );
  }
}

ConfigBlock.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ConfigBlock);

ServerBlock.js

class ServerBlock extends Component {
  constructor (props) {
    super(props)
    this.state = {
      children: []
    }
  }
  addServerBlock() {
    this.state.children.push(<NginxEntry/>)
    this.setState({children: this.state.children})
  }
  deleteMe = () => {
    this.props.unmountMe(this.props.key);
  }
  render () {
    const {classes} = this.props;
    return (
      <div className={classes.container}>
        <Card className={classes.card}>
          <CardContent>
            <Typography className={classes.title} color="primary">
              Server
            </Typography>

          </CardContent>
          <CardActions>
            <Button variant="contained" color="primary" className={classes.button} onClick={() => { console.log('onClick'); }}>
              Key/Value
              <AddIcon />
            </Button>
            <Button variant="contained" color="primary" className={classes.button} onClick={() => { console.log('onClick'); }}>
              Location
              <AddIcon />
            </Button>
            <Button variant="contained" color="primary" className={classes.button} onClick={() => { console.log('onClick'); }}>
              Comment
              <AddIcon />
            </Button>
            <Button variant="contained" color="primary" className={classes.button} onClick={ this.deleteMe }>
              <DeleteIcon />
            </Button>
          </CardActions>
        </Card>
      </div>
    );
  }
}

ServerBlock.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ServerBlock);

Answer 1

<img src="/static/svg/myfile.svg">是一个特殊的React属性，它不是一个prop，即孩子将永远无法访问它的值。如果孩子需要使用该值，请通过其他道具（以及通过钥匙）提供该值，例如

key

...除此之外，您的代码非常不寻常。您不应该直接改变状态（应该始终使用<ServerBlock unmountMe={this.handleChildUnmount} key={this.state.nextID} id={this.state.nextID} />），并且通常不会在状态中存储整个组件。值得深思的是，这是setState组件的另一种（未经试用的）实现，它使用ConfigBlock并稍微改变了一些逻辑：

setState

如何将道具传递给父对象（Material-UI React）

1 个答案: