在React.js中实现无状态子组件

Question

我正在尝试实现一个无状态的React组件，该组件将在页脚中显示方向（作为文本），我称之为Direction组件。 该组件旨在包含在其他父组件中，它们代表不同的页面，这些页面在必要的方向上传递，作为由Direction组件呈现的道具。

// direction.js 
'use strict';

var React = require('react');

var Direction = React.createClass({

    propTypes: {
        directionText: React.PropTypes.string.isRequired
    },

    render: function() {
        return (
            <div className="direction">
                <p className="direction-text">
                    {this.props.directionText}
                </p>
            </div>
        );
    }

});

module.exports = Direction;

// controller.js
var DirectionController = {
  // not sure how to configure it
};

我不确定如何配置controller 。

1. 我什至需要controller ，因为此组件将仅呈现文本并且不处理用户交互性？

2. 这个组件应该像我想的那么简单吗？

我是React的新手。

Answer 1

您仅在需要时将Direction组件包含在渲染中，并在属性directionText中传递要显示的内容

render: function() {
    <div className="whatever-class">
      <Direction directionText="Some text to show" /> 
      <Direction directionText="Some some more more text text" /> 
    </div>
)