Question

说我想创建一个UI元素列表，我希望每个元素的对齐方式不同。我想象的是：

<List>
<Button Alignment="right"/>
<Panel Alignment="left"/>
<Video Alignment="center"/>
</List>

这是如何最好地实现的？最好不要对每个子元素添加对齐属性的特殊处理。

Answer 1

有许多方法可以在React中完成类似的事情，没有特别的方式必然是＆＃34;最好的。＆＃34;

我绝对建议您查看：

http://facebook.github.io/react/docs/getting-started.html

这是使用简单mixin的一个想法。

var List = React.createClass({
    render: function() {
        return (
            <div>
                <Button alignment="right" />
                <Panel alignment="left" />
                <Video alignment="center" />
            </div>
        );
    }
});

var Button = React.createClass({
    mixins: [AlignmentMixin],
    render: function() {
        return (            
            <Button  { ... this.props } className={ this.renderAlignment() } />
        );
    }
});

var AlignmentMixin = {
    renderAlignment: {
        // whatever you'd like, just an example
        // of constructing a class name called box-right/left/center
        return "box-" + this.props.alignment;
    }
}

没有可以全局应用于所有类型的Angular指令。 React采用不同的方法，并且设计（当前）期望组件呈现众所周知的界面，并且不能由组件的消费者任意扩展。这意味着ReactJS中的组件只是它所说的和可以做的，而父组件只能通过在组件实例上设置属性来影响其行为。

在上面提供的示例中，我明确添加了＆＃34;对齐＆＃34;混合到按钮。没有它，按钮将没有对齐功能。

当然，如果没有可以像我上面所示那样简单应用的一般模式，你可以在Button上添加必要的代码来进行对齐。

有些人可能甚至不使用mixin，因为他们宁愿拥有＆＃34;是＆＃34; Button仅在名为Button.js的文件中（例如）。 UI和行为不会分散在多个文件中，因为它可能位于角度应用程序中（其中指令可能位于不同的文件中，很难发现可能应用于任何给定元素的内容）。

事实上，来自＆＃34; why react page＆＃34;：

由于它们被封装，组件使代码重用，测试，并且容易分离。

如何创建UI元素列表，每个元素以不同方式对齐？

1 个答案: