Javascript 道具还是状态？

我正在使用react js编写一个简单的待办事项列表。应用程序有一些操作，这些操作被合并到操作列表中。 类的结构如下所示：

应用程序

---团体活动

------ListOfActionsRow

------ActionRow

所有数据存储在全局var操作中，如下所示（它是一个全局var）：

var actions=[{list:'some list'，颜色：'#79fa5f'，名称：'some 操作'，优先级为'0'，完成：true}]

当用户更改操作名或列表名时，应该在“操作”和DOM中更改。我可以在“action”中更改它，但在DOM中更改它的最佳模式是什么？ 现在我用的是道具。以下是我的代码部分：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
行动=[]；
//从localStorage解析操作
}	
render（）{
返回(
);
}
}
类GroupOfActions扩展了React.Component{
渲染（）{
var行=[]；
var lastList=null；
this.props.actions.forEach（函数（操作）{
if（action.list！==lastList）{
rows.push（）；
}
rows.push（）；
lastList=action.list；
});
返回(
{rows}
);
}
}
类ActionRow扩展了React.Component{
onNameChange（）{
var targetAction=JSON.parse（JSON.stringify（“{\”list\”：\”）+
这是道具清单+
“\”，“\”颜色\“：\”'+
这是道具的颜色+
“\”，“\”名称\“：\”'+
this.props.action.name+
“\”，“\”优先级“：\”“+
这个。道具。行动。优先权+
“\”，“\”完成“：”+
这个。道具。动作。完成+
'}'));
console.log（targetAction）；
log（JSON.stringify（actions））；
var toDoList=JSON.stringify（操作）；
var startIndex=toDoList.indexOf（targetAction）；
var endIndex=startIndex+targetAction.length；
如果（开始索引>-1）{
var namestart index=targetAction.indexOf（“\”，“\“name\”：\”）；
var nameEndIndex=targetAction.indexOf（“\”，“priority\”：\”）；
toDoList=toDoList.substring（0，startIndex）
+toDoList.substring（startIndex，（nameStartIndex+11））
+this.refs.newName.value
+子字符串（nameEndIndex+1）；
console.log（toDoList）；
setItem（'toDoList'，toDoList）；
actions=JSON.parse（localStorage.getItem（'toDoList'）；
控制台日志（操作）；
this.props.action.name=this.refs.newName.value；
}else{console.log（startIndex）；}
}
渲染（）{
返回(
{this.props.action.name}
{this.props.action.priority}
优先
0
1.
2.
多恩
)
}
}
类ListOfActionsRow扩展了React.Component{
onNameOfListChange（）{
var oldNameOfList=this.props.list；
var newNameOfList=this.refs.newNameOfList.value；
var toDoList=JSON.stringify（操作）；
var新密码；
对于（var i=0；i这不是一种变异props的正确方法，如
this.props.action.name=this.refs.newName.value；
，理想的方法是将函数从父组件传递到子组件，并从子组件调用它，子组件在父组件中设置一个值，然后传递到子组件

另外，React DOCS建议对
refs
使用
callback
方法，而不是字符串方法

例如，在应用程序组件中创建一个函数来更改列表名称

class App extends React.Component {
    constructor(props){
        super(props);
        actions=[];
    //parsing actions from localStorage
    }   
    changeListName = (val) => {
            /// take action here
    }
    render() {
        return(
          <GroupOfActions actions={actions} changeListName = {(val) => {this.changeListName}}/>
        );
    }
}


class GroupOfActions extends React.Component {   
    render (){
        var rows=[];
        var lastList=null;
        this.props.actions.forEach((action) =>{
            if (action.list!==lastList){
                rows.push(<ListOfActionsRow list={action.list} key={action.list} color={action.color} changeListName={(val) => this.props.changeListName(val)}/>);
            }
            rows.push(<ActionRow action={action} color={action.color} list={action.list}  key={action.name} />);

            lastList=action.list;
        });

        return(
        <div className="container" >
        {rows}          
        </div>
        );
    }
}

class ListOfActionsRow extends React.Component {
    onNameOfListChange() {
        var oldNameOfList=this.props.list;
        var newNameOfList=this.refs.newNameOfList.value;
        var toDoList=JSON.stringify(actions);
        var newToDoList;
        for (var i=0;i<toDoList.length;i++) {
            var nameIndex=toDoList.indexOf(oldNameOfList,i);
            if (nameIndex==-1) continue;
            i=nameIndex;
            var nameEndIndex=nameIndex+oldNameOfList.length;
            newToDoList=toDoList.substring(0,nameIndex)
                    +newNameOfList
                    +toDoList.substring(nameEndIndex);
        } 

        console.log(newToDoList);
        localStorage.setItem('toDoList',newToDoList);
        actions=JSON.parse(localStorage.getItem('toDoList'));
        console.log(actions);
        this.props.changeListName(this.newNameOfList.value);

    }

    render() {
        return (
        <div>
           <div className={'row '+(this.state.editionOfList?'hidden':'')} >
              <div className="col-md-6" onClick={this.editListRow} >
                 <div className="well well-small lead" style={{backgroundColor:'{this.props.color}'}} style={{marginTop:'20px'}} ref={(list) => {this.oldNameOfList}}>
                    {this.props.list}
                 </div>
              </div>
           </div>
           <div className={'row '+(this.state.editionOfList?'':'hidden')} >
           <div className="col-md-6" >
              <div className="well well-small lead" onClick={this.editListRow} style={{backgroundColor:'#fafafa'}}>
                 <input type='text' ref={(list) => {this.newNameOfList}} defaultValue={this.props.list} onChange={this.onNameOfListChange} />
                        <label>Color</label>
                        <select>
                            <option value="0">Yellow</option>
                            <option value="1">Blue</option>
                            <option value="2">Green</option>
                        </select>
              </div>
            </div>
           </div>
           <div className="row" style={{marginBottom:'20px'}}>
               <div className="col-md-2">
           </div>
        </div>
        );
    }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
行动=[]；
//从localStorage解析操作
}   
changeListName=（val）=>{
///在这里采取行动
}
render（）{
返回(
{this.changeListName}}/>
);
}
}
类GroupOfActions扩展了React.Component{
渲染（）{
var行=[]；
var lastList=null；
this.props.actions.forEach（（action）=>{
if（action.list！==lastList）{
rows.push（this.props.changeListName（val）}/>）；
}
rows.push（）；
lastList=action.list；
});
返回(
{rows}
);
}
}
类ListOfActionsRow扩展了React.Component{
onNameOfListChange（）{
var oldNameOfList=this.props.list；
var newNameOfList=this.refs.newNameOfList.value；
var toDoList=JSON.stringify（操作）；
var新密码；
对于（var i=0；i
{this.props.list}
{this.newNameOfList}}defaultValue={this.props.list}onChange={this.onNameOfListChange}/>
颜色
黄色的
蓝色
绿色
);
}
}
感谢您的解释！我正在尝试这样做：在GroupOfActions rows.push（）中的App changeListName（val）{/}；在这一行中，我有一个错误“无法读取未定义的属性'props'”，您需要绑定forEach函数使用
this.props.actions.forEach（（action）=>{
上面的代码不是经过测试的工作代码，我想就如何实现您想要的给出一个想法