React：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が含まれていません。

これは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>

Answer 1

あなたがそれを使用していない...伝播しています。

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