首页 文章

React：更新this.props.children的className

提问于
浏览 次
2

我'm creating a component where I' d想要更新 this.props.children 的className prop .

为了实现这一点，我正在使用 React.Children 实用程序 . React.Children.map(children) 从子项创建一个新数组并 React.cloneElement(child) 来操纵子道具 .

map 和 cloneElement 在某些方面有效 . 我可以添加 props 并更改各个元素的 children . 但是 props.className 在渲染时不会传播到子节点的 class . 也就是说，我在新的children数组中看到 props.className 的更新，但渲染的子节点不包含新的 props.className .

这是 this.props.children 更新 props.className 的错误方法吗？如果是这样，那么正确的方法是什么？

class List extends React.Component {
  constructor(props) {
    super(props);
    this.items = React.Children.map(this.props.children, item => {
      const className = `${item.props.className} test`;
      const props = { ...item.props, className: className };
      return React.cloneElement(item, props, "TEST");
    });
  }

  render() {
    console.log(this.items);
    return (
      <ul>
        {this.items}
      </ul>
    );
  }
}

class ListItem extends React.Component {
  render() {
    return (
      <li className="item">
        {this.props.children}
      </li>
    );
  }
}

class Application extends React.Component {
  render() {
    return (
      <List>
        <ListItem ref="item1" className="item">A</ListItem>
        <ListItem ref="item2" className="item">B</ListItem>
        <ListItem ref="item3" className="item">C</ListItem>
        <ListItem ref="item4" className="item">D</ListItem>
      </List>
    );
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<Application />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.min.js"></script>
<div id="app"></app>
javascript reactjs

1 回答

  • 1

    它传播了...你只是没有使用它 .

    兑换

    <li className="item">

    至

    <li className={this.props.className}>

    class List extends React.Component {
  constructor(props) {
    super(props);
    this.items = React.Children.map(this.props.children, item => {
      const className = `${item.props.className} test`;
      const props = { ...item.props, className: className };
      return React.cloneElement(item, props, "TEST");
    });
  }

  render() {
    return (
      <ul>
        {this.items}
      </ul>
    );
  }
}

class ListItem extends React.Component {
  render() {
    return (
      <li className={this.props.className}>
        {this.props.children}
      </li>
    );
  }
}

class Application extends React.Component {
  render() {
    return (
      <List>
        <ListItem ref="item1" className="item">A</ListItem>
        <ListItem ref="item2" className="item">B</ListItem>
        <ListItem ref="item3" className="item">C</ListItem>
        <ListItem ref="item4" className="item">D</ListItem>
      </List>
    );
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<Application />, document.getElementById("app"));

    .test{
  background-color: red
}

.test {
  color: orange;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.min.js"></script>
<div id="app"></app>
    回复于

相关问题