Reactjs: 如何修改动态子组件状态或来自父组件的道具？

我本质上是在试图制作标签作为回应，但有一些问题。

这是 page.jsx文件

<RadioGroup>
<Button title="A" />
<Button title="B" />
</RadioGroup>

当您单击按钮 A 时，RadioGroup 组件需要取消选择按钮 B 。

“ Selected”只是指来自某个状态或属性的 className

这里是 RadioGroup.jsx:

module.exports = React.createClass({


onChange: function( e ) {
// How to modify children properties here???
},


render: function() {
return (<div onChange={this.onChange}>
{this.props.children}
</div>);
}


});

Button.jsx的来源并不重要，它有一个常规的 HTML 单选按钮，可以触发本机 DOMonChange事件

预期流量为:

  • 点击“ A”按钮
  • 按钮“ A”触发 Change，原生 DOM 事件，该事件冒泡到 RadioGroup
  • 调用 RadioGrouponChange 监听器
  • RadioGroup 需要取消选择按钮 B 。这是我的问题。

下面是我遇到的主要问题: I 不能将 ABC0移动到 RadioGroup，因为这个结构的子节点是 随心所欲。也就是说，标记可能是

<RadioGroup>
<Button title="A" />
<Button title="B" />
</RadioGroup>

或者

<RadioGroup>
<OtherThing title="A" />
<OtherThing title="B" />
</RadioGroup>

我试过几种方法。

尝试: 在 RadioGroup的 onChange 处理程序中:

React.Children.forEach( this.props.children, function( child ) {


// Set the selected state of each child to be if the underlying <input>
// value matches the child's value


child.setState({ selected: child.props.value === e.target.value });


});

问题:

Invalid access to component property "setState" on exports at the top
level. See react-warning-descriptors . Use a static method
instead: <exports />.type.setState(...)

尝试: 在 RadioGroup的 onChange 处理程序中:

React.Children.forEach( this.props.children, function( child ) {


child.props.selected = child.props.value === e.target.value;


});

问题: 什么都没有发生，即使我给 Button类一个 componentWillReceiveProps方法

尝试: 我尝试将父级的一些特定状态传递给子级，这样我就可以更新父级状态并让子级自动响应。在 RadioGroup 的渲染功能中:

React.Children.forEach( this.props.children, function( item ) {
this.transferPropsTo( item );
}, this);

问题:

Failed to make request: Error: Invariant Violation: exports: You can't call
transferPropsTo() on a component that you don't own, exports. This usually
means you are calling transferPropsTo() on a component passed in as props
or children.

糟糕的解决方案 # 1 : 使用 response-addons。JsCloneWithProps方法在 RadioGroup中的呈现时克隆子元素，以便能够传递它们的属性

糟糕的解决方案 # 2 : 围绕 HTML/JSX 实现一个抽象，这样我就可以动态地传递属性(杀了我) :

<RadioGroup items=[
{ type: Button, title: 'A' },
{ type: Button, title: 'B' }
]; />

然后在 RadioGroup中动态构建这些按钮。

这个问题对我没有帮助，因为我需要在不知道我的孩子是什么的情况下让他们进入角色

96883 次浏览
小开
最佳答案

I am not sure why you say that using cloneWithProps is a bad solution, but here is a working example using it.

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

Here's a jsFiddle showing it in action.

EDIT: here's a more complete example with dynamic tab content : jsFiddle

小开

The buttons should be stateless. Instead of updating a button's properties explicitly, just update the Group's own state and re-render. The Group's render method should then look at its state when rendering the buttons and pass "active" (or something) only to the active button.

小开

Maybe mine is a strange solution, but why do not use observer pattern?

RadioGroup.jsx

module.exports = React.createClass({
buttonSetters: [],
regSetter: function(v){
buttonSetters.push(v);
},
handleChange: function(e) {
// ...
var name = e.target.name; //or name
this.buttonSetters.forEach(function(v){
if(v.name != name) v.setState(false);
});
},
render: function() {
return (
<div>
<Button title="A" regSetter={this.regSetter} onChange={handleChange}/>
<Button title="B" regSetter={this.regSetter} onChange={handleChange} />
</div>
);
});

Button.jsx

module.exports = React.createClass({


onChange: function( e ) {
// How to modify children properties here???
},
componentDidMount: function() {
this.props.regSetter({name:this.props.title,setState:this.setState});
},
onChange:function() {
this.props.onChange();
},
render: function() {
return (<div onChange={this.onChange}>
<input element .../>
</div>);
}


});

maybe you require something else, but I found this very powerfull,

I really prefer to use an outer model that provide observer register methods for various tasks

小开

Create an object that acts as a middleman between the parent and child. This object contains function references in both the parent and child. The object is then passed as a prop from the parent to the child. Code example here:

https://stackoverflow.com/a/61674406/753632


提交答案