小编san*_*a-p的帖子

React props - 如果另一个prop为null/empty,则在prop上设置isRequired

我有一个组件<Button>.
如果组件没有this.props.children,我想将prop设置ariaLabel为isRequired,否则可以是可选的.我怎么做？

ariaLabel 道具不需要:

<Button>Add to bag</Button>

Run Code Online (Sandbox Code Playgroud)

ariaLabel 必须要求道具:

<Button ariaLabel="Add to bag" icon={ favorite } />

Run Code Online (Sandbox Code Playgroud)

if this.props.children和this.props.ariaLabel是空的,它会抛出一个错误,说this.props.ariaLabel是的isRequired

<Button icon={ favorite } />

Run Code Online (Sandbox Code Playgroud)

propTypes:

Button.propTypes = {
    /** icon inside Button. */
    icon: React.PropTypes.object,
    /** Content inside button */
    children: React.PropTypes.node,
    /** Aria-label to screen readers */
    ariaLabel: React.PropTypes.string, /*isRequired if children is empty */
};

Run Code Online (Sandbox Code Playgroud)

谢谢

javascript wai-aria reactjs

san*_*a-p

lucky-day

36
推荐指数

3
解决办法

1万
查看次数

使用带有CDN的React Router并且没有webpack或browserify

简历:我需要在没有wepback或类似工具的情况下运行React Router.直接来自CDN链接,但我遇到了一些require.js错误.

我开始使用React构建我的第一个应用程序,我正在努力使用React Router.

HTML:

<body>
    <div id="container"></div>


    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>

    <script src="https://npmcdn.com/react-router@2.4.0/umd/ReactRouter.js"></script>

    <script type="text/babel" src="assets/scripts/03_templates/app.js" charset="utf-8"></script>

</body>

Run Code Online (Sandbox Code Playgroud)

JS:

var { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } = ReactRouter;

//some classes 

ReactDOM.render((
    <Router history={hashHistory}>
        <Route path="/" component={Window}>
            <IndexRoute component={InitialPage}/>
            <Route path="register" component={Register} />
            <Route path="search" component={Search} />
        </Route>
    </Router>
), document.getElementById("container"));

Run Code Online (Sandbox Code Playgroud)

一切都运行正常,但我在控制台上得到这个:

react.js:3639警告:您正在手动调用getComponentprop 的React.PropTypes验证函数IndexRoute.这已被弃用,在下一个主要版本的生产中无法使用.由于第三方PropTypes库,您可能会看到此警告.

所以,我想我的反应路由器是旧版本.我将链接更改为

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-0/react-router.js"></script>

Run Code Online (Sandbox Code Playgroud)

警告:React.createElement:type不应为null,undefined,boolean或number.它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合组件).

我搜索它,似乎问题在第1行.所以我改变了这个:

var { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } = …

Run Code Online (Sandbox Code Playgroud)

javascript cdn requirejs reactjs react-router

san*_*a-p

2016 11-23

15
推荐指数

3
解决办法

7064
查看次数

离子2 +角度2:自动滚动到列表/页面/聊天的底部

我正在尝试使用"聊天"和"内容"两个段来编写页面.我想要一个"聊天"段,页面自动滚动到底部,没有任何效果.聊天是<ion-list>几个<ion-item>.

<ion-list>
<ion-item> item 1 </ion-item>
<ion-item> item 2 </ion-item>
....
<ion-item> item 20 </ion-item>
<ion-item> item 21 </ion-item> <!-- user should see directly this item on bottom of the page -->
</ion-list>

Run Code Online (Sandbox Code Playgroud)

我使用的是Javascript,而不是打字稿,我不想使用jQuery.谢谢:)另外,当我进入"内容"细分并回到"聊天"时,我想再次自动滚动聊天.

javascript chat autoscroll ionic2 angular

san*_*a-p

2016 05-25

12
推荐指数

3
解决办法

3万
查看次数

React Router — 使用 <Link> 返回

<Link>在 React Router v6 中，如何使用而不是返回到上一页useNavigate()。

// Instead of this...
<button onClick={() => navigate(-1)}>

Run Code Online (Sandbox Code Playgroud)

// Instead of this...
<button onClick={() => navigate(-1)}>

Run Code Online (Sandbox Code Playgroud)

将其更改为<Link>将允许我使用<a href="xxxx">而不是 a <button>，这是在页面之间创建链接的最容易访问的方式。（有关按钮与链接的更多信息）。例如，它允许用户右键单击并在新选项卡中打开页面。

但我不知道将什么 URL 传递给链接。

更新：我创建了一个codesandbox来帮助您找到解决方案。

更新 2：根据答案和一些研究，我创建了一个 GitHub 问题react-router

更新3：我在下面添加了我自己对此问题的答案。

reactjs react-router-dom

san*_*a-p

2023 05-20

10
推荐指数

2
解决办法

1万
查看次数

带有 CSS 变量和 @keyframes 的 CSS 动画在 Safari 上未更新

我正在使用 CSS 变量制作动画，其中 CSS 变量值根据页面滚动而变化。然后将该变量用于具有关键帧的动画。

最初它只能在 Firefox 上正确更新。同时，我找到了一种方法让它在 Chrome 上也能工作，通过强制重新绘制，在这种情况下，将颜色从 #000 动画到 #001。

/* --scale is dynamic changed by JS */

@keyframes move {
    0% {
        transform: translateX(0) scale(var(--scale));
        color: #000;
    }
    100% {
        transform: translateX(33vw) scale(1.5);
        color: #001;
    }
}

Run Code Online (Sandbox Code Playgroud)

您可以在 codepen 上查看演示

css safari animation repaint

san*_*a-p

2019 11-26

7
推荐指数

1
解决办法

2531
查看次数

App Store - 帮助回答“缺少合规性”（使用 Expo + Firebase）

我正在将我的应用发布到 App Store，但我对“缺少合规性”步骤有疑问。

以下是有关该应用程序的一些信息：

我使用了Expo（托管工作流）。这意味着我无法直接访问 Xcode。
这是一个简单的 2D 视频游戏，免费，带有Expo ADMob。您可以付费移除广告。
它请求相机和图书馆许可（如果玩家想要拍照）。没有通知，或任何其他额外的东西。
它使用 Firebase（数据库、存储和分析）和 Sentry。（用于 HTTPS 连接）
我没有手动包含任何“加密”自定义内容（我知道）
我正在从欧洲的葡萄牙发布该应用程序。如果可能的话，我计划在全球范围内发布它。

您的应用是否使用加密？我没有编写任何与之相关的代码......但我想我应该说是的，对吧？

您的应用是否符合美国出口管理条例第 5 部分第 2 部分中规定的任何豁免条件？. 我的应用程序是一个简单的 JS 视频游戏，带有 MobAds。我应该说是还是不是？

您的应用程序是否实施了任何专有的或不被国际标准机构（IEEE、IETF、ITU 等）接受为标准的加密算法？我确实说不……是吗？

您的应用程序是否实施任何标准加密算法来代替或补充使用或访问 Apple 操作系统中的加密？如果我说不，它会显示一条关于 HTTPS 的额外消息。我的应用程序确实将 HTTPS 用于 Firebase（数据库、存储和分析）和 Sentry。

最后，如果我说是，它会说：此时无法测试版本 0.1.0 (1)，因为该版本没有相关的出口合规文档。我在哪里可以找到此文档以及如何获取它？我来自葡萄牙，欧洲。

谢谢！

encryption ios react-native expo app-store-connect

san*_*a-p

lucky-day

6
推荐指数

2
解决办法

3645
查看次数

ionic2 - 仅当用户在Toast中单击"关闭"时才创建函数

我用ionic2创建了一个toast(+ angular2 with javascript,而不是typescript),用户从列表中删除了一个项目.

到目前为止Undo一切都很好,现在我想在吐司里面添加一个按钮(替换为Undo),将它放回到列表中并同时解除吐司.

我的代码到目前为止:

archiveItem(item) {
    let toast = Toast.create({
        message: 'Item archived.',
        duration: 2000,
        showCloseButton: true,
        closeButtonText: 'Undo',
        dismissOnPageChange: true,
    });

    var index = this.items.indexOf(item);
    this.items.splice(index, 1); //remove the item


    toast.onDismiss(() => {
        console.log('Dismissed toast');
        this.items.splice(index, 0, item); //put back the item on right place
    });


    this.nav.present(toast);
}

Run Code Online (Sandbox Code Playgroud)

单击时Undo,该项目返回列表,问题是如果我不单击它,它也会返回到列表.

我想我需要创建另一个函数Undo,但我不知道该怎么做,Ionic2 DOCS不会谈论它...

谢谢 :)

javascript undo toast ionic2 angular

san*_*a-p

2016 05-26

4
推荐指数

1
解决办法

2735
查看次数

VSCode — 将自定义片段提交到存储库

如何通过存储库与同事共享我的自定义片段？例如，共享javascript.json文件。

我知道它应该进入内部.vscode，但具体在哪里以及具体的配置是什么？

visual-studio-code vscode-snippets

san*_*a-p

lucky-day

4
推荐指数

1
解决办法

776
查看次数

Ionic2 + Angular2 - 带有离子图标星的动态速率值

我正在尝试构建一个从 0 到 5 星（及其中间值，如 x.5 [example 4.5] ）的简单动态速率，该速率从 javascript 接收值。

我用 *ngFor 寻找了一些东西，但我不明白它是如何工作的。有人可以解释/帮助我吗？

如果有帮助，对于离子，我们有 3 种类型的星星可用：

<ion-icon name="star"></ion-icon>
<ion-icon name="star-half"></ion-icon>
<ion-icon name="star-outline"></ion-icon>

Run Code Online (Sandbox Code Playgroud)

例如，如果我从服务器收到一个值率 = 3.5，它会呈现：

<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-half"></ion-icon>
<ion-icon name="star-outline"></ion-icon>

Run Code Online (Sandbox Code Playgroud)

我正在使用 javascript，没有打字稿。

非常感谢：）

ps不确定这个标题是否更好，欢迎任何建议:)

javascript rate ionic2 ngfor angular

san*_*a-p

lucky-day

3
推荐指数

1
解决办法

2108
查看次数

React - 如何动态创建属性

我有2个属性连接到2道具:aria-hidden和aria-label.
什么时候aria-hidden是真的,它只显示一个.如果它是假的,它只显示aria-label.

我写了这段代码,但它并不干......我怎样才能改进它？

 render() {
     let svgMarkup = '';

        if (this.props.hidden) {
            svgMarkup = (
                <svg role="img" aria-hidden="true">
                    ...
                </svg>
            );
        } else {
            svgMarkup = (
                <svg role="img" aria-label={ this.props.label }>
                    ...
                </svg>
            );
        }

        return svgMarkup;
 }

Run Code Online (Sandbox Code Playgroud)

wai-aria reactjs react-jsx

san*_*a-p

2017 01-26

3
推荐指数

1
解决办法

777
查看次数