Question

我现在有这些，并且＆＃34; YoYo＆＃34;文本左对齐（默认）。而且我想控制＆＃34; YoYo＆＃34;文本＆＃39;这些位置可能会出现在右侧。

我尝试使用justifyContent:'flex-end'或alignSelf:'flex-end'提供样式对象，但它们都没有效果。

  <List>
    <ListItem containerElement={<ChatObject id='1' value="YoYo" style={{alignSelf:'flex-end'}} />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
  </List>

ChatObject定义为：

render() {
    return (
      <TextField
        id={this.props.id}
        value={this.props.value}
        underlineShow={false}
      />
    );
  }

Answer 1

你可以通过提供像

这样的风格来做到这一点

  text-align: right;

因此在样式对象中它将是textAlign: 'right'。

不要忘记给予适当的宽度。

Answer 2

初看起来，你应该将样式道具一个一个地传递给子元素，直到DOM元素为止例如：<TextField style={props.style} />

Answer 3

我成功地做到了这一点：

<ListItem style={{display:'flex', justifyContent:'flex-end'}} >
  <ChatObject id={item.id} value={item.value} />
</ListItem>

此处的关键是添加display:'flex'。

如何将文本放在右侧的ListItem中？

3 个答案: