Question

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

改进是创建另一个渲染的组件道具。国家通常不赞成，除非需要，通常是国家保持在组的根目录，其组件使用道具。更多道具 ==很好。

我正在努力完全掌握他的评论，并且无法在谷歌上找到任何简洁的内容来重写此代码。任何人都可以用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')
);

从reactjs组件中删除状态

2 个答案: