从reactjs组件中移除状态

Question

我有以下反应脚本，它可以正常工作。然而，我正在学习反应和同行向我提到这件事： -

一个改进将是创建另一个组件，从 道具呈现。状态通常会被忽视，除非需要，状态通常是 在其组件的根部使用道具保存。更多道具 ==不错。

我很努力地完全掌握他的意见，在google上无法找到任何简洁的内容来重写这段代码。任何人都可以帮助改写更多reactjs的方式吗？

var MachineInfo = React.createClass({ 
    getInitialState: function() { 
     return { 
      data: [] 
     }; 
    }, 

    componentDidMount: function() { 
     $.get(this.props.source, function(result) { 

      this.setState({ 
       data: result 
      }); 


     }.bind(this)); 
    }, 

    render: function() { 

     var createItem = function(item) { 
      return <p>{item.Id} {item.Key} {item.Value} </p>; 
     }; 

     return <div>{this.state.data.map(createItem)}</div>; 

    } 
}); 

React.render(
    <MachineInfo source="/ajax/namevalues/2" />, 
    document.getElementById('reactdiv') 
); 

这将JSON我检索

[ 
    {"Id":5,"Key":"Temp","Value":"160"}, 
    {"Id":6,"Key":"Pressure","Value":"Light"}, 
    {"Id":7,"Key":"Time","Value":"Pre 10 Press 20"}, 
    {"Id":8,"Key":"Release","Value":"Warm"} 
] 

Answer 1

您可以创建另一个组件像MachineInfoItem，并通过这将使使用道具像下面的JSON。

var MachineInfo = React.createClass({ 
    getInitialState: function() { 
     return { 
      data: [] 
     }; 
    }, 

    componentDidMount: function() { 
     $.get(this.props.source, function(result) { 

      this.setState({ 
       data: result 
      }); 


     }.bind(this)); 
    }, 

    render: function() { 

     var createMachineInfoItems = function(info) { 
      return <MachineInfoItem info={info} /> 
     }; 

     return <div> 
      {this.state.data.map(createMachineInfoItems)} 
     </div>; 

    } 
}); 

var MachineInfoItem = React.createClass({ 
    render: function() { 
    return <p> 
     {this.props.info.Id} 
     {this.props.info.Key} 
     {this.props.info.Value} 
    </p> 
    } 
}); 

React.render(
    <MachineInfo source="/ajax/namevalues/2" />, 
    document.getElementById('reactdiv') 
); 

Thinking in React是一个很好的博客文章，它解释了这一点。

Answer 2

感谢@Deepak为我展示了我需要知道的答案。我最终使用的代码是： -

var MachineInfo = React.createClass({ 
    getInitialState: function() { 
     return { 
      data: [] 
     }; 
    }, 

    componentDidMount: function() { 
     $.get(this.props.source, function(result) { 
      this.setState({ 
       data: result 
      }); 
     }.bind(this)); 
    }, 

    render: function() { 
     return <MachineInfoHeader data={this.state.data} />  
    } 
}); 

var MachineInfoHeader = React.createClass({ 
    render: function() { 
     var createMachineInfoItems = function(info) { 
      return <MachineInfoItem info={info} /> 
     }; 
     return <div>{this.props.data.map(createMachineInfoItems)}</div> 
    } 
}); 

var MachineInfoItem = React.createClass({ 
    render: function() { 
     return <p> 
      {this.props.info.Id} 
      {this.props.info.Key} 
      {this.props.info.Value} 
     </p> 
    } 
}); 

React.render(
    <MachineInfo source="/ajax/namevalues/2" />, 
    document.getElementById('reactdiv') 
);