标签: react-component

在参考了这个文档可按下文档后，我正在使用可按下作为按钮

现在我想为按钮添加涟漪效果，但它无法正常工作。

      <Pressable
        android_ripple={{color: 'red', borderless: false}}
        style={{backgroundColor: 'blue',borderRadius : 10}}>
        <Text style={{alignSelf: 'center'}}>Button</Text>
      </Pressable>

如果按钮具有半径，则波纹效果没有边框半径。波纹效果角超出弯曲半径看起来很尴尬。

有没有办法在更新多个状态后刷新/渲染一次功能组件？

例如：

const [first, setFirst] = useState(false);
const [second, setSecond] = useState(false);

当被叫...

...
setFirst(true);
setSecond(true);

...然后该组件将刷新两次。是否可以同时设置并刷新（或渲染）一次？

我正在尝试创建一个可重用的 React 组件库供我们内部使用。

Webpack 正在捆绑输出 - 这应该是单个文件。但它实际上发布了我期望的 bundle.js和一个名为 [some_hash].worker.js 的文件。

我不确定如何强制 webpack 将“worker”文件包含在我要求的单个包中。

webpack.config：

const path = require('path');
const webpack = require('webpack');

const DIST_PATH = path.resolve(__dirname, "../dist");
const SRC_PATH = path.resolve(__dirname, "../src");
const APP_PATH = path.resolve(__dirname, "../src/index.js");
const BASE_PATH = path.resolve(__dirname);
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = ({ appPath = APP_PATH, distPath = DIST_PATH }) => ({
  context: BASE_PATH,
  devServer: {
    contentBase: distPath,
    compress: true,
    port: 9000,
    historyApiFallback: true
  },
  resolve: {
    modules: ['node_modules', …

我正在尝试创建一个带有可排序列的DetailsList（类似于此处文档中的示例： https: //uifabric.azurewebsites.net/#/controls/web/detailslist），但我想使用而不是类组件功能组件和钩子。

问题在于，当执行 onColumnClick 函数时，“items”数组仍然为空。

这基本上是我的组件的设置：

const MyList= () => {
  const [items, setItems] = useState([]);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    const newItems = someFetchFunction()
    setItems(newItems);

    const newColumns= [
      {
        key: "column1",
        name: "Name",
        fieldName: "name",
        onColumnClick: handleColumnClick,
      },
      {
        key: "column2",
        name: "Age",
        fieldName: "age",
        onColumnClick: handleColumnClick,
      },
    ];
    setColumns(newColumns);
  }, []);

  const handleColumnClick = (ev, column) => {
    console.log(items); // This returns [] instead of a populated array.
  };

  return <DetailsList items={items} columns={columns} …

在我的 Next.js 应用程序中，我需要进行一个 API 调用，该调用将返回一个所有组件都需要使用的 JSON 响应。因此，我将避免在我的组件中多次调用相同的 API。实现这一目标的正确方法是什么？

我在 React Native 应用程序中使用 i18next 和 react-i18next ，更具体地说是输入验证。我试图将 t() 作为 no 组件中的参数传递，但收到错误“TypeError: n 不是函数。（在 'n('errorMessages.emailNoMatch')' 中，'n' 未定义） ”。非常感谢任何建议，因为我对编码相对较新，并且我已经为此问题搜索了几天。

这是 i18n.js 代码：

import i18next from 'i18next';
import common_de from './translations/de/common.json';
import common_en from './translations/en/common.json';
import i18n from 'i18n-js';
import * as Localization from 'expo-localization';
// Set up translations
i18next.init({
  interpolation: { escapeValue: false }, // React already does escaping
  lng: 'en', // language to use
  resources: {
    de: {
      common: common_de, // 'common' is our custom namespace
    },
    en: {
      common: …

我有一个由一个对象组成的组件，该对象包含一个对象数组，而对象数组又包含键和字符串

this.state = {
  dinosaurs: [
    { era: "jurassic", name: "diplodocus", diet: "herbivore" },
    { era: "cretaceous", name: "velociraptor", diet: "carnivore" },
  ]
}

当我在 React devtools 中打开该组件时，我发现我可以通过双击这些字符串来编辑字符串，例如"jurassic"或"diplodocus"，但我显然无法更改“era”等键或恐龙数组。但是，可以使用 React DevTools 更改它，但我做得不正确。

我在 Google DevTools 中使用 React DevTools。

使用 React DevTools 可以或不可以更改组件状态中的哪些内容？

我尝试查看 GitHub 自述文件，我可以在部分侧窗格中看到编辑状态的提及，但没有提及可以编辑和不能编辑的内容。

我查看了如何从浏览器设置 React 组件状态和属性，但有一条评论告诉用户阅读 React DevTools 的友好手册，以及没有解决使用 React DevTools 可能或不可能的答案。

我是反应的绝对初学者。我必须将特定属性传递给 div 内的所有组件，而不将它们传递给 individual，例如，而不是这样做：

 function App() {
    return (
      <div>
        <Component1 props = {propObject}/>
        <Component2 props = {propObject}/>
        <Component3 props = {propObject}/>
      </div>
    );
}

我怎样才能实现这样的目标？:

function App() {
  return (
    <div props={propObject}>
      <Component1 />
      <Component2 />
      <Component3 />
    </div>
  );
}

React 中“父组件”的定义是什么？

例如。

const A = () => {
  return (
    <B>
      <C/>
    </B>
  );
}

是A的父母吗C？
是B的父母吗C？

后续： 获取via prop
B的元素。如果是 的子级，则应该是 的父级。但这实际上应该是这里提到的。CchildrenCBBCcontainment

我有一个应用程序，可以从 GraphQL 数据库中提取数据，然后将其映射到自定义表单组件（数量文本框）中。现在，组件本身保存着各自数量的状态，但我需要能够从父级访问这些值，以便我可以使用应用程序中其他地方的输入来更改数量。我已经查看了这是如何完成的，我认为这可能是我需要的，但我不知道如何应用它：[How to target DOM with React useRef in map][1]

我的应用程序由一个父元素和一个包含输入的顶部栏、一个模态组件以及从 GraphQL 查询填充的元素映射组成。

export default function Home() {
  const [batch, setBatch] = useState([]);
  const [target, setTarget] = useState("");
  const [batchCount, setBatchCount] = useState(0);
  const [cartModalStatus, setCartModalStatus] = useState(false);

  const elementValues = useRef([]);
  const fetcher = query => request("https://data.objkt.com/v2/graphql", query);
  const { data, error } = useSWR(
  `{
    listing(where: {token: {creators: {creator_address: {_eq: ` + target + `}}, supply: {_gt: "0"}}, status: {_eq: "active"}}, order_by: {token: {timestamp: asc}, price: asc}) …