小编koj*_*ow7的帖子

我试图创建一些旁边的方形div(如果文本太多,可以扩展高度......但大多数时候文本不会太多).我试图以响应的方式设置它.

在页面上滚动时,我的移动浏览器中的地址栏会一直显示和消失.当手机处于横向模式时会发生这种情况,每次地址栏开启或关闭时尺寸都会改变.这会产生非常烦人的用户体验.

我的HTML代码中包含以下视口行:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我的代码看起来像这样:

.block {
        width: 80vmin;
        min-height: 80vmin;
        margin: 5% auto;
        border-radius: 15vmin;
        padding: 20px 10px;

}

显然,罪魁祸首是vmin组件.如果我没有指定vmin,那么在横向模式下查看时框太大了.

有没有办法让vmin忽略地址栏并假装它不存在？如果没有,我还有什么其他选择来解决这个问题？

我正在使用flexbox布局，并尝试在特定div中获取文本以进行调整以适合该div。

因此，例如，如果我有如下代码：

<div style={{display: "flex"}}>
   <div style={{flex: 1}}>
      A really, really, really, really long phrase here that will fit this div, and may wrap onto multiple lines if necessary. In this case it should fill half of the available space as the other div will cover the other half of the space.
   </div>
   <div style={{flex: 1}}>
      Some other text
   </div>
</div>

实际上，文本将从数据库中提取，因此长度是动态的。

如何在第一个div中获取文本以自动调整以适合整个div？

说明： div应该保持固定大小，并且只有文本应该缩小以适合div，而不是使div溢出。

更新资料

我还发布了一个关于特定模块的更具体的问题，该模块称为react-textfit无法按我期望的方式工作。

我试图浏览一堆带有其他对象链接的对象.我想从最低的id号(根对象)开始,并根据连接的链接浏览每个对象.一些对象链接将循环回到以前的对象,所以我想确保只查看每个对象链接,否则我将陷入无限循环.我还希望能够通过从第一个链接开始的链接导航来判断哪些对象无法访问.

我的数据库中的表格如下所示:

对象表:

+----+---------+
| id | title   |
+----+---------+
|  1 | Apple   |
|  3 | Carrot  |
|  4 | Dill    |
|  5 | Egg     |
|  6 | Fred    |
|  7 | Goat    |
|  8 | Harry   |
|  9 | Igloo   |
| 10 | Jason   |
| 11 | Klaus   |
| 12 | Banana  |
| 15 | Oyster1 |
| 16 | Oyster2 |
+----+---------+

Object_Links表:

+----+---------+--------------+
| id …

我创建了一个Google Chrome扩展程序,允许用户选择组件中的文本.这适用于大多数网站.但是,Facebook以不同方式处理其状态更新.看起来,即使您正在填写看似单个文本框的内容,它实际上也是div > div > span > span在此文本框中为每一行使用构造.我不知道他们为什么选择这样做,但它使得替换多行文本变得更加复杂.

有没有办法在Facebook状态更新中选择多行(甚至多行的连续部分)文本并替换数据？

我的代码的相关部分如下所示:

function replace_text(language){
    let selection = window.getSelection();
    string = selection.toString();

    /* This section contains code that uses string.replace to replace characters in the string. */

    document.execCommand("insertText", false, string);

}

基于我的代码现在的工作方式,如果我在一行上替换文本我没有问题.但是,如果我替换跨越多行的文本,我最终会得到一个空白的不可用输入框.毫无疑问,这是因为它正在删除部分HTML代码.如何修复我的代码,以便替换过程不仅适用于其他网站,还适用于Facebook？

我目前有两个数组设置,我试图检查一个单词中的最后两个字母,如果与第一个数组匹配,则将其替换为其他字符.我目前正在努力做到这一点到行尾,但我无法弄清楚如何为不在行尾的单词执行此操作.

以下是我的数组可能是什么样子的示例.这些是从数据库查询填充的.字符可以是任何Unicode字符,因此不一定在AZ或az的范围内.

$array1 = ['mp', 'tm', 'de', 'HK'];
$array2 = ['MAP', 'TM', "DECIMAL", '?'];

我当前的代码如下所示:

$mystring = "samplemp";
$last = substr($mystring, -2);
$newlast = str_replace($array1, $array2, $last);
if ($last != $newlast){
    $mystring = substr($mystr, 0, 2).$newlast;
}

我的工作:

所以,我目前的代码查看了字符串中的最后两个字符.如果最后两个字符是"mp",例如它用"MAP"替换它们.所以如果我的字符串看起来像:

samplemp

它被正确地改变为

sampleMAP

到目前为止一切正常.

问题

我遇到的问题是处理不在字符串末尾的单词.例如:

samplemp okay de     hellotm
blatm theHK end

应该换成

sampleMAP okay DECIMAL     helloTM
blaTM the? end

我希望能够考虑所有空白区域,包括空格,制表符和回车.但是,空格必须保持完整且不会更改.空格必须保留为空格,制表符作为制表符,并且回车时返回回车符.

到目前为止,我已经能够弄清楚我可能需要使用\s转义字符来使用正则表达式来计算空格.但是,我无法理解如何在作用于数组的str_replace函数中使用它.有没有办法做到这一点？如果没有,我还应该做些什么才能让它发挥作用？

在我的数据库中,我有几个表.一个是检查点表,记录用户选择完成其中一个项目.此表包含自动创建的时间戳.每当用户完成他们的项目时,都会在检查点表中添加一个新行(这样我们也可以保留项目最终确定的先前历史记录).

我还有其他几个带有时间戳的表(或者我也可以添加时间戳列的表),这些表会在表更改时自动更新.

是否有一种简单的方法可以判断自项目上次最终确定以来是否有其他表已更新其数据？我不需要知道哪些表已经更改了数据,只是存在已更改数据的表.

例如,如果用户更改其中一个表中的数据,我希望能够显示一条消息,指示其项目具有未终结的数据.

我有几种方法可以考虑这样做:

1. 检查每个表以查看是否有任何时间戳比检查点表中的最新时间戳更新.
2. 将另一个时间戳列(我已经创建并更新了时间戳列)添加到主项目表中.大多数其他表直接或间接链接到此主项目表.将触发器添加到每个其他表以在数据更改时更新此时间戳.我还不确定如何正确设置适当的触发器.
3. 仅使用project_id和timestamp列创建新表.向其他表添加触发器,如选项2所示.

随着新模块的添加,我将在项目中添加更多表格,因此需要一些易于扩展的内容.

这些方法中的每一种似乎都涉及很多步骤.

这些方法中的一种比另一种方法更有效或更可行吗？还有另外一种我没想过的方法吗？如果触发器是执行此操作的最佳方式,我将如何设置触发器？

我的表的简化概述如下所示:

main_project_table
    id
    user_id (FK to user_table)
    created_timestamp
    updated_timestamp

checkpoint_group_table (users can choose which group to finalize their project too)
    id
    user_id (FK to user_table)
    group_name

checkpoint_table (the table that records the finalized data and time of finalization)
    id
    checkpoint_group_id (FK to checkpoint_group_table)
    project_id (FK to main_project_table)
    project_finalized_timestamp

 parent_table (several of these)
     id
     project_id (FK to main_project_table)

 child_table (0 or more of these for each parent_table)
     id
     parent_id (FK …

我试图建立一个站点，以便用户只能访问自己的图像和音频文件。为此，我在URL中使用了变量，例如：

 <img src="/public/get_file.php?type=image&file=pic001.png" />

在前端，我正在使用React JS（不确定这对这个问题是否重要）。但是在后端，PHP脚本将验证用户已登录（仅通过检查一个简单的SESSION变量），并在用户的数据目录中查找该文件（基于其SESSION变量中的用户ID）。如果存在，它将使用XSendFile将其返回给用户。

我遇到的问题是，每次用户尝试访问文件时，在加载文件之前都会有一些延迟。这告诉我它们可能没有被浏览器缓存。

为什么文件没有被缓存？它与URL参数有关还是与PHP / XSendFile的使用有关？

如何允许我的文件（图像/音频）被缓存？

更新资料

根据要求，这里是我的get_file.php：

<?php

        session_start();

        if (empty($_SESSION['auth']['id'])){
                exit;
        }

        require_once("../../api_modules/settings.php");

        $developer_id = $_SESSION['auth']['id'];

        $type = preg_replace('/[^-a-zA-Z0-9_]/', '', $_GET['type']);
        $file = preg_replace('/[^-a-zA-Z0-9_\.]/', '', $_GET['file']);

        $file = preg_replace('/[\.]{2,}/', '', $file);

        $project_id = preg_replace('/[^0-9]/', '', $_GET['project_id']);
        $developer_id = preg_replace('/[^0-9]/', '', $developer_id);

        if ($type == "image")
                $file = FILEPATH ."files/$developer_id/$project_id/images/thumbs/88x88/$file";
        else if ($type == "full_image")
                $file = FILEPATH ."files/$developer_id/$project_id/images/originals/$file";
        else if ($type == "audio"){
                $file = FILEPATH ."files/$developer_id/$project_id/audio/$file";
        }
        else {
                exit;
        }


        header("X-Sendfile: …

即使我可以更改屏幕方向以更新状态并重新渲染，ImageBackground 组件仍然不会更新其宽度。

我有以下代码：

<View
  onLayout={event => this.mylayoutchange(event)}
  style={{ flex: 1, backgroundColor: 'green' }}
>
  <ImageBackground
    style={{ flex: 1, width: this.state.width, height: this.state.height }}
    imageStyle={{ resizeMode: 'repeat' }}
    source={require('../assets/images/my_background.jpg')}
  >
    <View>
      <Text>.... Other code here....</Text>
    </View>
  </ImageBackground>
</View>;

当用户改变设备的方向时， mylayoutchange() 函数被调用。它正确更新状态。渲染函数将更新。宽度和高度已正确更改，如 中所示console.log()。但是，无论出于何种原因，<ImageBackground>都不会更新其正确的宽度和高度。

当屏幕旋转时，背景图像不再填满屏幕的整个尺寸，而是看到绿色背景颜色。

我究竟做错了什么？

我的环境：

"react": "16.13.1",
"react-native": "0.63.2",

我试图确定如何在同一组件中引入多个数据.

我在React/Redux中看到的每个例子都要求非常具体的数据,并且有减少器和动作来处理这种确切类型的数据.但是,我无法找到有关处理更多通用数据的信息.

例如,我的网站上有一些不同的组件(或类别).其中一个组成部分是Cards.因此,如果用户点击链接,/cards/hockey则应该从API请求曲棍球数据(如果它已经不在商店中),并将其显示在卡片页面中.如果用户单击该链接/cards/football,则应按照相同的步骤进行操作,检查其是否已存储数据,如果未从API中提取数据,则显示包含该数据的"卡片"页面.

另一种组件类型可能是stats关于不同运动队的统计数据.

我不会总是知道提前有哪些类型的卡,所以我不能在我的应用程序中硬编码特定的运动类型.

所以在这种情况下,我只想创建两个组件:卡片和统计信息,但是有动态加载的数据来填充这些组件.

现在我有太多的重复,它是硬编码的.这意味着我将来无法动态添加新类型,而无需创建新代码来处理这些类型.

所以,例如,现在我有/actions/footballCardActions.js和/actions/hockeyCardActions.js.然后我有/reducers/footballCardReducers.js和/reducers/hockeyCardReducers.js.我也可能有Stats组件的类似组件.

我还指定了诸如FETCH_HOCKEY_CARDS_SUCCESS或之类的状态FETCH_FOOTBALL_CARDS_SUCCESS.

这些都是硬编码的,这使得可扩展性变得困难.

我试图遵循的一个例子是https://scotch.io/tutorials/bookshop-with-react-redux-ii-async-requests-with-thunks-但它再次使用非常具体的数据请求,而不是通用的数据请求.

我可以做些什么来使我的代码更通用,以便我不需要硬编码特定的数据集.是否有任何处理类似情况的好教程？

更多澄清

我的一个组件(屏幕)是运动卡屏幕.菜单系统(带链接)是在API上自动生成的,因此我并不总是知道可用的链接.因此,曲棍球,足球,以及其他一些我没有想过的运动可能会有链接.单击菜单链接后,它将调用该运动类型的API并在运动卡屏幕上显示数据.

基于上面的链接(和其他类似的网站),我已经想出如何在动作和减速器部分对特定运动的每个请求进行硬编码,但是如果我一直无法弄清楚如何做到这一点不提前知道运动.

根据目前的答案进一步澄清

如果有人在名为MuffiBall的API数据库中添加了新的运动,我的应用程序需要能够处理它.因此,我不能指望为添加到API的每项新运动添加新的JavaScript代码.

从数据库检索的所有体育卡都遵循相同的结构.

我当前代码的概述

index.js

//index.js
//Other imports here (not shown)
import Cards from './components/CardsPage'
import * as cardActions from './actions/cardActions';
import * as statsActions from './actions/statsActions';

import configureStore from './store/configureStore';

const store = configureStore();

/* Bad place to put these, and currently I am expected to know what every sport …

I am trying to create a menu system with an image and text above and below. The data is dynamic. I am wanting the menu system to appear so that each image is equal distance from each other image so that they line up in a grid of images both horizontally and vertically.

The problem is the text. If the text is longer than the image, then the div gets enlarged. However, then it creates an awkward looking gap as …