反應：更新this.props.children的className

Question

我正在創建一個組件，我想更新this.props.children的className prop。

要完成此操作，我使用了React.Children實用程序。 React.Children.map(children)從子女創建一個新陣列並React.cloneElement(child)來操縱子項道具。

在某些方面map和cloneElement工作。我可以添加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"));

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

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