栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

React.js:如何从父级修改动态子级组件状态或道具?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

React.js:如何从父级修改动态子级组件状态或道具?

我不确定为什么您说使用

cloneWithProps
是一个不好的解决方案,但是这里是一个使用它的有效示例。

var Hello = React.createClass({    render: function() {        return <div>Hello {this.props.name}</div>;    }});var App = React.createClass({    render: function() {        return ( <Group ref="buttonGroup">     <Button key={1} name="Component A"/>     <Button key={2} name="Component B"/>     <Button key={3} name="Component C"/> </Group>        );    }});var Group = React.createClass({    getInitialState: function() {        return { selectedItem: null        };    },    selectItem: function(item) {        this.setState({ selectedItem: item        });    },    render: function() {        var selectedKey = (this.state.selectedItem && this.state.selectedItem.props.key) || null;        var children = this.props.children.map(function(item, i) { var isSelected = item.props.key === selectedKey; return React.addons.cloneWithProps(item, {     isSelected: isSelected,     selectItem: this.selectItem,     key: item.props.key });        }, this);        return ( <div>     <strong>Selected:</strong> {this.state.selectedItem ? this.state.selectedItem.props.name : 'None'}     <hr/>     {children} </div>        );    }});var Button = React.createClass({    handleClick: function() {        this.props.selectItem(this);    },    render: function() {        var selected = this.props.isSelected;        return ( <div     onClick={this.handleClick}     className={selected ? "selected" : ""} >     {this.props.name} ({this.props.key}) {selected ? "<---" : ""} </div>        );    }});React.renderComponent(<App />, document.body);

这是一个jsFiddle演示它的运行情况。

编辑
:这是带有动态标签内容的更完整示例:jsFiddle



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/485074.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号