小编Haq*_*q.H的帖子

我有一个按预期呈现的 pdf，除了一个问题，即当页面信息中包含很长的单词时，该单词不会将单词包装到换行符上，而是直接从容器中继续，离开页面，输出谁知道那扇门通向哪里。

这是造成此问题的容器之一的设置。样式遵循实际结构。

       const styles = StyleSheet.create({
         section: {
            paddingBottom: 20,
            position: 'relative',
         },
         sectionTitle: {
            fontSize: 12,
            fontWeight: 700,
            borderBottom: '2 solid #333333',
            display: 'block',
            marginBottom: 10,
            textTransform: 'uppercase',
            lineHeight: 1.2,
          },
        })

以下是页面部分的设置

        <View style={styles.section}>
          <StyledText style={styles.sectionTitle}>Description</StyledText>
          <StyledText style={{ width: '80%', fontWeight: 400 }}>
            {data.description}
          </StyledText>
        </View>

这里的 data.description 是以下形式的文本：“looooooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnggggggggggggggggggggggggggggggggggggggggggggggggg”这样的东西。容器应该破坏这个单词，但无论我如何尝试设计它的样式，这个单词都没有响应。当碰到容器末端时如何打破单词？

到目前为止，我已经尝试过使用 wordWrap、wordBreak、flex、flexWrap、flexGrow/Shrink 和 OverflowWrap。似乎没有什么效果

我已经提交并试图将更改推送到 repo，但它给了我这个错误。

remote: refs/heads/feature/OMT-1270-Missing-French-Translations: cd54ab15bc8d5764ab12cf6fc202fd9e7d36294b: No JIRA Issue found in commit message.
remote:
To REPONAME
 ! [remote rejected]   feature/OMT-1270-Missing-French-Translations -> feature/OMT-1270-Missing-French-Translations (pre-receive hook declined)
error: failed to push some refs to REPONAME

我以前做过这个，而且效果很好。票也是有效的。为什么它一直抛出这个错误？

回购是bitBucket，原始提交消息是

git commit -m "OMT-1270 Adding missing translations"

我需要使用Material UI选择器在此处提供的inlineDatePicker组件：https ://material-ui-pickers.dev/getting-started/installation

我运行了npm -i命令，但是当我尝试编译代码时，出现此错误：

Failed to compile.

./node_modules/material-ui-pickers/dist/material-ui-pickers.esm.js
577:16-26 '@material-ui/core' does not contain an export named 'makeStyles'.

什么？我错过了什么吗？我该如何解决？

编辑：所以检查下面，我检查了版本，它给了我这个错误：

 peer dep missing: @material-ui/core@^4.0.0-alpha.7, required by material-ui-pickers@3.0.0-alpha.2

所以我做了npm -i@ material-ui / core @ ^ 4.0.0-alpha.7

现在又出现了另一个编译错误...

 '@material-ui/core' does not contain an export named 'createStyles'.

我可以安装可以防止这种疯狂的@ material-ui / core版本吗？

我正在学习如何在这里使用前向引用，我有一个 FC，我需要在其中初始化所有引用，然后将它们传递给它的子级，以便我可以获得一些 Chartjs 图表的画布实例。然而，使用forwardRef我得到一个类型错误，说ref不是孩子的属性。

const BUIDashboard: React.FC = () => {
    const chartRef = React.createRef<RefObject<HorizontalBar>>()
.
.
.
    return (

      <Child 
          ref={chartRef} <------------------- TYPE ERROR HERE
          isLoading={isLoadingChild}
          data={childData} />
     )
}

孩子没有错误，但它是这样设置的

type Props = {
  rootProps?: DashboardCardProps
  isLoading?: boolean
  data?: BUIMetrics['breachBreakdownByOutcome']
}

const Child: React.FC<Props> = React.forwardRef(({ rootProps, isLoading, data }, ref: RefObject<HorizontalBar>) => {

    return (
      <HorizontalBar ref={ref}/>
    )
}

我是否错误地为孩子定义了参数？

我认为问题可能出在这一行

const Child: React.FC<Props>

所以我将 Props 类型更新为

type Props = {
  rootProps?: DashboardCardProps
  isLoading?: boolean
  data?: BUIMetrics['breachBreakdownByOutcome'] …

因此，概述用例：从我的后端服务中，我收到了一个对象列表，我使用 ngFor 拆分这些对象并使用 . 我在这张卡片上附加了一个工具提示以显示有关该项目的信息。每个项目的信息是一个元素列表。对于工具提示，我将列表发送到一个函数并使用 '\r\n' 字符连接列表的项目，但是工具提示根本不读取字符，只在工具提示中显示一个连续的字符串

<div *ngFor="let item of itemList; ">
 <mat-card matTooltip="{{getDesc(item)}}">
    <span class="card-title" style="font-size: 12px">
      {{ item.itemName }}
    </span>
 </mat-card>
</div>

toolTip 描述函数：

getDesc(item){
  let itemDesc: any;
  if(item.itemDescList !== null)
    itemDesc = item.itemDescList.join('\r\n')
  return itemDesc
}

如何在工具提示中引入这些换行符？

示例数组：['desc 1 : some text', 'desc 2: some text', ...] 这些需要在工具提示的新行中显示

我想知道是否有办法为已禁用的 Mat-Expansion-Panel 设置样式。我在标题中有按钮并且与它们交互会切换面板，所以我相信最好只用按钮切换面板并禁用面板本身。

但是，当我禁用面板时，面板内的所有项目都会变灰。有没有办法删除禁用样式或覆盖它们？

我刚刚开始使用 React，我正在尝试使用该材料的日期选择器

它看起来像这样：

      <TextField
        name="someDate"
        label="Some Date"
        InputLabelProps={{ shrink: true, required: true }}
        helperText={errors.someDate}
        FormHelperTextProps={{ hidden: !this.hasError('someDate') }}
        type="date"
        error={this.hasError('someDate')}
        onChange={this.handleSomeDateChange}
        value={values.someDate}
      />

设置： type="date" 为我提供了日期选择器，但它也将默认值的格式覆盖为“dd/mm/yyyy”。我希望默认值是values.someDate 我尝试使用defaultValue 属性和value 属性，如上所示，但没有成功。更改标签的唯一方法是删除 type="date" ，这也会删除日期选择器。

如何在渲染时将其设置为values.someDate？