从 reactjs 组件中删除状态

Question

我有以下反应脚本，它工作正常。然而，我正在学习反应，一位同行向我提到了这一点：-

An improvement would be to create another component that renders from props. state is usually frowned upon unless needed, state is usually held at root of a group with its components using props. more props == good.

我正在努力完全理解他的评论，在 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 是一篇出色的博客 post，它解释了这一点。

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

从 reactjs 组件中删除状态

Remove state from a reactjs component

reactjs