Reactjs 分离React.js中的组件

我有一个我正在使用的组件，它有一个列表，如果单击其中的某个项目，它将输出与该项目相关的某些数据。react类看起来像：

SocialMenu = React.createClass({

    getInitialState: function(){
        return { focused: 0 };
    },

    clicked: function(index){

        // The click handler will update the state with
        // the index of the focused menu entry

        this.setState({focused: index});
    },

    render: function() {

        // Here we will read the items property, which was passed
        // as an attribute when the component was created

        var self = this;

        // The map method will loop over the array of menu entries,
        // and will return a new array with <li> elements.

        return (
            <div>
                <ul className="testblocks">{ this.props.items.map(function(m, index){

                    var style = '';

                    if(self.state.focused == index){
                        style = 'focused';
                    }

                    // Notice the use of the bind() method. It makes the
                    // index available to the clicked function:

                    return <li key={index} className={style} onClick={self.clicked.bind(self, index)}>{m}</li>;

                }) }

                </ul>

                <p>Selected: {this.props.items[this.state.focused]}</p> 

            </div>
        );

    }
});

SocialMenu=React.createClass({
getInitialState:函数（）{
返回{聚焦：0}；
},
单击：函数（索引）{
//单击处理程序将使用更新状态
//焦点菜单项的索引
this.setState（{focused:index}）；
},
render:function（）{
//这里我们将读取传递的items属性
//作为创建组件时的属性
var self=这个；
//map方法将在菜单项数组上循环，
//并将返回一个包含
元素的新数组。
返回(
{this.props.items.map（函数（m，索引）{
var样式=“”；
if（self.state.focused==索引）{
风格=‘专注’；
}
//注意bind（）方法的使用
//可用于单击功能的索引：
返回
{m}
；
}) }

所选：{this.props.items[this.state.focused]}

);
}
});

编辑：

我想组件应该是这样的：

ItemDetails = React.createClass({

    render: function() {

        return (
            <div>{this.props.item}</div>
        );
    }

});

ItemDetails=React.createClass({
render:function（）{
返回(
{this.props.item}
);
}
});

当我把它放在SocialMenu组件中时，它工作得很好，但是如果我想把它放在页面的其他任何地方，输出是未定义的。我该怎么处理

编辑：

我正在尝试将其设置为这样的组件：

Description = React.createClass({

    getInitialState: function() {
        return { default: true };
    },

    render: function() {

        return (

            <section id="one" className="main style1">
                <div className="container">

                    <ItemDetails />

                    <span className="image fit">
                      <img src="images/pic01.jpg" alt="" />
                    </span>

                </div>
            </section>

        );

    } 

});

Description=React.createClass({
getInitialState:函数（）{
返回{default:true}；
},
render:function（）{
返回(
);
} 
});

而

组件应显示与单击SocialMenu列表中特定项目相关的输出。如果我只是给它输入道具（

），它只会打印出输入的内容

---

如果我将SocialMenu放在Description组件中，那么该列表将显示在该部分中（我不需要）

您可以将此代码移动到将当前项目作为道具的新组件中

您已经通过

this.props.items[this.state.focused]

获得了当前项目，因此将其作为道具传递给新组件

丹·阿布拉莫夫（Redux的创建者）关于

---

分离表示组件和容器组件

只需。。。那么创建另一个组件？您遇到了什么问题？如何让该组件继承：{this.props.items[this.state.focused]}这与我们之前在另一个问题上讨论的问题相同（似乎找不到它，它是否已删除？）。您必须在组件之间进行一些通信。可以通过一个父组件或类似于Flux的东西通过组件边界进行通信。这里是：基本上，您可以选择这种方法，或者将您的通信分离为Flux，或者订阅其他“消息”系统。考虑到大量优秀的通量实现，我建议阅读这些内容。如果您无法在两个组件之间放置一个母组件，那么它正好为您解决了这个问题。我如何编写ItemDetails组件？因此，我创建了该组件，但我无法将其放置在另一个组件（另一部分）中，因为它没有被输入项数据。错误是：Uncaught TypeError:无法读取未定义的属性“undefined”，该属性在SocialMenu组件中有效，但在其他组件中无效，我如何克服此问题？项目是否像在SocialMenu组件中一样作为道具传递给其他组件？目前还没有，我该怎么做？