React:更新this.props.children的className

时间:2017-06-10 14:45:53

标签: javascript reactjs

我正在创建一个组件,我想要更新this.props.children的className prop。

要完成此操作,请使用React.Children实用程序。 React.Children.map(children)从子项创建一个新数组,React.cloneElement(child)来操作子道具。

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

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



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"));
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分: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>