Question

标题似乎不太合逻辑，但是通过这篇文章，您将了解我的问题。

好吧，我有3个文件，我正试图将包含组件CSS属性的文件中的prop传递给主要对象，其中我正在加载组件。

所以我得到了这个：

interface isTitleDisabled {

    isDisabled?:boolean;

}

export const Container = styled.div`
${({ isDisabled }: isTitleDisabled) => `
  padding: 117px 36px 117px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px 0px;
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
  margin-bottom: 18px;
  margin-right: 25px;
  margin-left: 20px;
  margin-top: ${isDisabled ? '200px' : '25px;'};
`}`;

然后，我尝试转到此位置：

interface IProps {
  isDisplayedLoadingTitle: boolean;
  isDisabled?:boolean;
}

export default ({isDisplayedLoadingTitle}: IProps) => (
  <Fragment>
    {isDisplayedLoadingTitle && (
    <ChartLoaderUI.ChartTitleContainer>
      <ChartLoaderUI.ChartTitle>
        <ChartLoaderUI.Title>{`Loading...`}</ChartLoaderUI.Title>
      </ChartLoaderUI.ChartTitle>
    </ChartLoaderUI.ChartTitleContainer>
    )}
    <ChartLoaderUI.Container className={'chart-loader'} isDisabled> **look here!** 
      <Loader textDisabled={true} />
    </ChartLoaderUI.Container>
  </Fragment>
);

最后尝试将其传递给主要对象，如下所示： <ChartLoader isDisplayedLoadingTitle={false} isDisabled={true}/>

我实际上想要实现的是在禁用实际部分（此处）时加载某些CSS：

{isDisplayedLoadingTitle && (
    <ChartLoaderUI.ChartTitleContainer>
      <ChartLoaderUI.ChartTitle>
        <ChartLoaderUI.Title>{`Loading...`}</ChartLoaderUI.Title>
      </ChartLoaderUI.ChartTitle>
    </ChartLoaderUI.ChartTitleContainer>
    )}

如何实现正确使用 prop isDisabled并为其设置值（正确或错误）的方法，就像我在这里进行的操作：<ChartLoader isDisplayedLoadingTitle={false}。

基本上，应该执行isDisplayedLoadingTitle={false}上的isDisabled值为假（显示不同的样式，因为这就是为什么我在UI文件中设置了界面的原因，样式正在发生。）

非常感谢您的帮助。

通过文件传递道具到主道具

0 个答案: