在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>
)