小编soo*_*kie的帖子

是否可以在自定义反应组件上设置className?

假设我有一个像这样的简单组件:

class SimpleComponent extends React.Component
{
    render() { return <p>Some text</p> }
}
Run Code Online (Sandbox Code Playgroud)

是否有可能加入classNameSimpleComponent或者是这个限制为仅HTML DOM元素?

例如:

var mySimpleComponent = <SimpleComponent className="myComp"/>
Run Code Online (Sandbox Code Playgroud)

我想这样做的原因是我可以在我的自定义组件中设置元素的样式,如下所示:

.myComp > p {
    background-color: blue;
}
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

15
推荐指数
1
解决办法
1万
查看次数

状态机和UI:基于"节点级"状态而不是"叶子"状态进行渲染

在继续之前,我想指出这个问题的标题很难说.如果应该使用更合适的标题,请告诉我,以便我可以更改它并使这个问题对其他人更有用.

好的,关于问题......我目前正在研究React/Redux项目.我做出的一个设计决定是几乎完全用(分层)状态机来管理app状态和UI,原因有很多(我不会深入研究).

我利用Redux将我的状态树存储在一个名为的子状态中store.machine.然后Redux子系统的其余部分负责存储应用程序'数据'.通过这种方式,我将这两个问题分开,以便它们不会跨越边界.

除此之外,我还将(React)方面的问题分开 - 使用"状态组件"和"UI组件".状态组件几乎完全处理状态流,而UI组件是在屏幕上呈现的那些组件.

我有三种类型的状态组件:

  • 节点:这种状态组件处理状态分支.它根据当前状态(一种委托形式)确定应该呈现哪个组件.
  • Leaf:这种状态组件存在于状态树的叶子中.它的工作仅仅是渲染一个UI组件,传递负责更新状态树的必要"调度"回调.
  • 容器:这种状态组件封装了要并行呈现的节点UI组件.

对于我的情况,我们只关注NodeLeaf组件.我遇到的问题是,当UI组件基于"叶子状态"呈现时,可能存在"更高级别"状态可能影响UI应该如何呈现的情况.

采用这种简化的状态结构: 简化的州结构

AppStateHome州开始.当用户单击登录按钮时,将to_login调度操作.负责管理的减速机AppState将接收此动作并将新的当前状态设置为Login.

同样,在用户键入其凭据并完成验证后,将调度a successfailaction.同样,这会被同一个减速器接收,然后转换到适当的状态:User_PortalLogin_Failed.

React组件结构如下所示: 反应组件结构

我们的顶级节点AppState作为道具接收,检查当前状态是什么,并呈现/委托给其中一个子Leaf组件.

然后,Leaf组件呈现传递回调的具体UI组件,以允许它们分派必要的操作(如上所述)以更新状态.虚线表示'state'和'ui'之间的边界,并且此边界仅在Leaf组件处交叉.这使得可以独立地处理StateUI,因此我想维护它.

这是事情变得棘手的地方.想象一下,为了论证,我们有一个顶级状态来描述应用程序所使用的语言 - 让我们说EnglishFrench.我们更新的组件结构可能如下所示: 更新的组件结构

现在我们的UI组件必须以正确的语言呈现,即使描述它的状态不是Leaf.处理UI呈现的Leaf组件没有父状态的概念,因此没有应用程序所在语言的概念.因此,语言状态无法在不破坏模型的情况下安全地传递给UI.要么必须删除状态/ UI边界线,要么需要将父状态传递给子节点,这两者都是可怕的解决方案.

一种解决方案是"复制" AppState每种语言的树结构,实质上是为每种语言创建一个全新的树结构......如下所示: 每种语言的全新树结构

这几乎和我上面描述的两个解决方案一样糟糕,并且需要不断增加的组件来管理事物. …

javascript state-machine reactjs redux react-redux

12
推荐指数
1
解决办法
176
查看次数

CSS/Javascript - "display:none"暂时删除任何关联的事件监听器吗?

我在效率方面的思考更多.如果我选择将元素的显示设置为none,javascript会继续侦听附加到它的事件,还是会暂时删除它们,直到显示被还原为止?

javascript css event-listener

11
推荐指数
2
解决办法
6774
查看次数

在短路评估中允许零值

短路评估确定第一个值是否为假.如果是,则返回第二个值,如下所示:

var x = y || z; // if y is falsey return z
Run Code Online (Sandbox Code Playgroud)

有没有办法在不使用if/else语句或三元运算符的情况下使用短路评估时忽略零值为假?

javascript

9
推荐指数
1
解决办法
587
查看次数

Sublime Text 3:将字体大小重置为自定义字体大小?

在我的按键绑定中添加以下内容,可以将Sublime Text 3中的字体大小重置为默认大小:

{ "keys": ["ctrl+0"], "command": "reset_font_size" }
Run Code Online (Sandbox Code Playgroud)

但这也会重置我在用户首选项中设置的所有字体大小。例如,默认字体大小为10。当我在用户首选项中添加以下内容时...

"font_size": 8
Run Code Online (Sandbox Code Playgroud)

...然后使用重置我的字体大小ctrl+0,此设置消失,字体大小恢复为默认值10。如何防止此行为?

fonts sublimetext3

6
推荐指数
1
解决办法
1429
查看次数

我可以在react-pdf中设置PDF分辨率(每英寸像素数)吗?

一些背景:

PDF 文档没有原生像素分辨率。这是因为 PDF 文档是按英寸缩放的。然后,每个 PDF 查看器确定每英寸将显示多少像素(例如 Adob​​e Acrobat 为 110 像素/英寸)。

我的问题:

React-PDF使用默认比例 72ppi。然而,在许多情况下,这对于舒适的阅读来说太小了。我希望有办法将默认 PPI 设置为 96。

我目前所做的:

我将每个缩放<Page/>因子,但是我担心这种缩放是在主渲染过程之后96 / 72应用的(即在像素输出上)而不是作为其中的一部分(即在源文档上)。

<Document file={url}>
  <Page scale={96/72} pageNumber={1}/>
</Document>
Run Code Online (Sandbox Code Playgroud)

这可能会导致最终输出模糊。

可能的解决方案?

将文档渲染为 SVG 可能会改善最终的缩放分辨率细节。

<Page renderMode="svg"/>
Run Code Online (Sandbox Code Playgroud)

其他人有在react-pdf 中使用 PPI 的经验吗?

javascript pdf reactjs react-pdf

6
推荐指数
1
解决办法
6132
查看次数

WindowsError: [错误 3] 系统找不到指定的路径(路径太长时?)

WindowsError: [错误 3] 系统找不到指定的路径(路径太长时?)

我正在制作一个脚本来查找两个目录之间的唯一文件。为了做到这一点,我使用os.walk()遍历文件,如果存在相同大小的文件,我会散列它们以确保它们相同(在此过程中打开文件)。问题是某些文件在打开时会产生上述错误。人们遇到此问题的最常见原因是路径未正确连接,从而导致脚本尝试打开不存在的文件。这不是我的情况。

在尝试了不同的目录组合后,我开始注意到一种模式,即产生错误的文件似乎具有很深的目录结构和很长的文件名。我想不出这个问题的任何其他原因 - 没有字符编码错误(我将所有路径解码为 UTF-8)并且路径确实存在于os.walk().

我的步行代码:

for root, dirs, files in os.walk(directory):
    for filename in files:
        file_path = os.path.join(root, filename)
Run Code Online (Sandbox Code Playgroud)

我的哈希码:

def hash(file_path):
    with open(dir_file, 'rb') as f:
        hasher = hashlib.md5()
        while True:
            buf = f.read(byte_size)
            if buf != '':
                hasher.update(buf)
            else:
                break
        result = hasher.hexdigest()
    return result
Run Code Online (Sandbox Code Playgroud)

编辑:出现问题的最新路径是 5 个目录深(包含 142 个字符,占双反斜杠),文件名还有 122 个字符长

python-2.7

5
推荐指数
1
解决办法
3111
查看次数

获取reactjs中组件的可选道具列表

有没有办法获取任何propTypes引用可选属性的键(即未指定为必需)?

例如,给出以下道具:

TestComponent.propTypes = {
    requiredProp: PropTypes.string.isRequired,
    optionalProp: PropTypes.func,
    optionalProp2: PropTypes.element
}
Run Code Online (Sandbox Code Playgroud)

...我可以得到一个包含这些项目的数组: ["optionalProp", "optionalProp2"]

如果没有内置的方法来做到这一点,那么有一个优雅的解决方案:

  1. 避免对其列表进行硬编码
  2. 避免从实现此功能的自定义类派生
  3. 可以在我的所有反应组件中使用

我正在考虑使用上下文来定义这样的函数,然后在当前组件上调用它,如下所示: this.context.getOptionalProps.call(this)

但这似乎是对上下文的错误使用.

javascript ecmascript-6 reactjs

5
推荐指数
1
解决办法
405
查看次数

ES6 - 从项目根目录(babel/node/npm)导入模块

在继续之前,我尝试了以下解决方案:

最近向我移交了一个项目,该项目使用了可能变得非常长且晦涩的相对导入语句(例如import * as stuff from '../../../../../utilities/stuff')。我想简化使用项目的根目录以这种方式我们的import语句:import * as stuff from '~/utilities/stuff

我对包、依赖项和配置的理解仍处于起步阶段。它看起来像我们用巴贝尔为transpiling,但是我没有看到一个核心巴贝尔包-只有babel-jestbabel-polyfill

这是我们的 package.json:

{
    "name": "placeholder",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "animejs": "^2.2.0",
        "babel-polyfill": "^6.26.0",
        "classnames": "^2.2.5",
        "html-to-react": "^1.3.0",
        "htmlparser2-react": "0.0.4",
        "js-csp": "^1.0.1",
        "npm-run-all": "^4.1.1",
        "prop-types": "^15.5.10",
        "react": "^16.0.0",
        "react-addons-css-transition-group": "^15.6.2",
        "react-aria-menubutton": "^5.0.2",
        "react-dnd": "^2.5.1",
        "react-dnd-html5-backend": "^2.5.1",
        "react-dom": "^16.0.0",
        "react-redux": "^5.0.6",
        "react-router": "^4.2.0",
        "react-router-dom": "^4.2.2", …
Run Code Online (Sandbox Code Playgroud)

javascript node.js ecmascript-6 babeljs

5
推荐指数
0
解决办法
488
查看次数

如何修改Material-UI &lt;Select&gt;下拉div的z-index?

我正在渲染一个<AppBar>具有大 z-index 值的(使用withStyles,它的值theme.zIndex.modal + 2计算为1202)。

这样做的原因是为了确保我的<Drawer>组件在打开时保持隐藏在后面<AppBar>(即夹住的抽屉)。

但是当我渲染一个<Select>组件时,“下拉”div 没有足够大的 z-index 值来显示,因此它最终隐藏在应用程序栏后面。

一个基本的例子如下:

let Test = ({classes}) => (
  <AppBar className={classes.appbar} elevation={2} position='relative'>
    <Toolbar>
      <Select>
        <MenuItem>{"Item 1"}</MenuItem>
        <MenuItem>{"Item 2"}</MenuItem>
      </Select>
    </Toolbar>
  </AppBar>
)

const styles = theme => ({
  appbar: {
    zIndex: theme.zIndex.modal + 2,
    margin: 0
  }
})

Test = withStyles(styles)(Test);
Run Code Online (Sandbox Code Playgroud)

覆盖任何公开类上的 z-index<Select>似乎并不能解决我的问题。如何确保<Select>出现在前面<AppBar>

javascript reactjs material-ui

5
推荐指数
1
解决办法
6426
查看次数