我正在创建一个组件,我想要更新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"));
&#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;
答案 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>