假设我有一个像这样的简单组件:
class SimpleComponent extends React.Component
{
render() { return <p>Some text</p> }
}
Run Code Online (Sandbox Code Playgroud)
是否有可能加入className到SimpleComponent或者是这个限制为仅HTML DOM元素?
例如:
var mySimpleComponent = <SimpleComponent className="myComp"/>
Run Code Online (Sandbox Code Playgroud)
我想这样做的原因是我可以在我的自定义组件中设置元素的样式,如下所示:
.myComp > p {
background-color: blue;
}
Run Code Online (Sandbox Code Playgroud) 在继续之前,我想指出这个问题的标题很难说.如果应该使用更合适的标题,请告诉我,以便我可以更改它并使这个问题对其他人更有用.
好的,关于问题......我目前正在研究React/Redux项目.我做出的一个设计决定是几乎完全用(分层)状态机来管理app状态和UI,原因有很多(我不会深入研究).
我利用Redux将我的状态树存储在一个名为的子状态中store.machine.然后Redux子系统的其余部分负责存储应用程序'数据'.通过这种方式,我将这两个问题分开,以便它们不会跨越边界.
除此之外,我还将(React)方面的问题分开 - 使用"状态组件"和"UI组件".状态组件几乎完全处理状态流,而UI组件是在屏幕上呈现的那些组件.
我有三种类型的状态组件:
对于我的情况,我们只关注Node和Leaf组件.我遇到的问题是,当UI组件基于"叶子状态"呈现时,可能存在"更高级别"状态可能影响UI应该如何呈现的情况.
AppState在Home州开始.当用户单击登录按钮时,将to_login调度操作.负责管理的减速机AppState将接收此动作并将新的当前状态设置为Login.
同样,在用户键入其凭据并完成验证后,将调度a success或failaction.同样,这会被同一个减速器接收,然后转换到适当的状态:User_Portal或Login_Failed.
我们的顶级节点AppState作为道具接收,检查当前状态是什么,并呈现/委托给其中一个子Leaf组件.
然后,Leaf组件呈现传递回调的具体UI组件,以允许它们分派必要的操作(如上所述)以更新状态.虚线表示'state'和'ui'之间的边界,并且此边界仅在Leaf组件处交叉.这使得可以独立地处理State和UI,因此我想维护它.
这是事情变得棘手的地方.想象一下,为了论证,我们有一个顶级状态来描述应用程序所使用的语言 - 让我们说English和French.我们更新的组件结构可能如下所示:

现在我们的UI组件必须以正确的语言呈现,即使描述它的状态不是Leaf.处理UI呈现的Leaf组件没有父状态的概念,因此没有应用程序所在语言的概念.因此,语言状态无法在不破坏模型的情况下安全地传递给UI.要么必须删除状态/ UI边界线,要么需要将父状态传递给子节点,这两者都是可怕的解决方案.
一种解决方案是"复制" AppState每种语言的树结构,实质上是为每种语言创建一个全新的树结构......如下所示:

这几乎和我上面描述的两个解决方案一样糟糕,并且需要不断增加的组件来管理事物. …
我在效率方面的思考更多.如果我选择将元素的显示设置为none,javascript会继续侦听附加到它的事件,还是会暂时删除它们,直到显示被还原为止?
短路评估确定第一个值是否为假.如果是,则返回第二个值,如下所示:
var x = y || z; // if y is falsey return z
Run Code Online (Sandbox Code Playgroud)
有没有办法在不使用if/else语句或三元运算符的情况下使用短路评估时忽略零值为假?
在我的按键绑定中添加以下内容,可以将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。如何防止此行为?
一些背景:
PDF 文档没有原生像素分辨率。这是因为 PDF 文档是按英寸缩放的。然后,每个 PDF 查看器确定每英寸将显示多少像素(例如 Adobe 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 的经验吗?
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 个字符长
有没有办法获取任何propTypes引用可选属性的键(即未指定为必需)?
例如,给出以下道具:
TestComponent.propTypes = {
requiredProp: PropTypes.string.isRequired,
optionalProp: PropTypes.func,
optionalProp2: PropTypes.element
}
Run Code Online (Sandbox Code Playgroud)
...我可以得到一个包含这些项目的数组: ["optionalProp", "optionalProp2"]
如果没有内置的方法来做到这一点,那么有一个优雅的解决方案:
我正在考虑使用上下文来定义这样的函数,然后在当前组件上调用它,如下所示: this.context.getOptionalProps.call(this)
但这似乎是对上下文的错误使用.
在继续之前,我尝试了以下解决方案:
最近向我移交了一个项目,该项目使用了可能变得非常长且晦涩的相对导入语句(例如import * as stuff from '../../../../../utilities/stuff')。我想简化使用项目的根目录以这种方式我们的import语句:import * as stuff from '~/utilities/stuff。
我对包、依赖项和配置的理解仍处于起步阶段。它看起来像我们用巴贝尔为transpiling,但是我没有看到一个核心巴贝尔包-只有babel-jest和babel-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) 我正在渲染一个<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 ×8
reactjs ×5
ecmascript-6 ×2
babeljs ×1
css ×1
fonts ×1
material-ui ×1
node.js ×1
pdf ×1
python-2.7 ×1
react-pdf ×1
react-redux ×1
redux ×1
sublimetext3 ×1