如何从反应组件导出变量？

Question

我正在使用 Mantine 作为搜索栏，我需要获取文本区域的字数。 这是使用 Nodejs 和 React。 我需要能够导出此值以在不同的文件中使用。

import React, { useState } from 'react';
import { TextInput, createStyles } from '@mantine/core';
var count = document.getElementById('count');

const useStyles = createStyles((theme, { floating }: { floating: boolean }) => ({
  root: {
    position: 'relative',
  },
  label: {
    position: 'absolute',
    zIndex: 2,
    top: 7,
    left: theme.spacing.sm,
    pointerEvents: 'none',
    color: floating
      ? theme.colorScheme === 'dark'
        ? theme.white
        : theme.black
      : theme.colorScheme === 'dark'
      ? theme.colors.dark[3]
      : theme.colors.gray[5],
    transition: 'transform 150ms ease, color 150ms ease, font-size 150ms ease',
    transform: floating ? `translate(-${theme.spacing.sm}px, -28px)` : 'none',
    fontSize: floating ? theme.fontSizes.xs : theme.fontSizes.sm,
    fontWeight: floating ? 500 : 400,
  },
  required: {
    transition: 'opacity 150ms ease',
    opacity: floating ? 1 : 0,
  },
  input: {
    '&::placeholder': {
      transition: 'color 150ms ease',
      color: !floating ? 'transparent' : undefined,
    },
  },
}
)
);
export function FloatingLabelInput() {
  const [focused, setFocused] = useState(false);
  const [value, setValue] = useState('');
  const { classes } = useStyles({ floating: value.trim().length !== 0 || focused });
  const uniqueid = "input";
  return(
    <TextInput
      id={ uniqueid }
      placeholder="Add anything you want to the book of the internet."
      required
      classNames={classes}
      value={value}
      onChange={(event) => setValue(event.currentTarget.value)}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      mt="md"
      onKeyUp={(e) => {
        var text = value.split(' ');
        var wordcount = 0;
        for (var i = 0; i < text.length; i++) {
          if (text[i] !== ' ') {
            wordcount++;
            }
          }
          count.innerText = wordcount;
        }
        }
      autoComplete="nope"
    />
      );
}

如您所见，它正确地将其输出到 html，但在 function 内部返回根本不起作用。

我尝试导出它，我尝试将它返回到 function 但它没有看到它。 我尝试导出和使用模块导出，但这也不起作用。 任何帮助，将不胜感激。

Answer 1

在下面的代码片段中，我的根组件（称为 App）负责保留应用程序 state，但它可以将 state 的任何部分提供给它的任何子组件。 它还可以为其子项提供 state 修饰符（ setX函数），这就是我在这里演示的内容：

 function Input ({ setWordCount }) { function updateWordCount (event) { setWordCount(event.target.value.split(' ').length) } return <input type="text" onKeyUp={updateWordCount} /> } function SomeOtherComponent ({ count }) { return ( <span>: {count} words</span> ) } function App () { const [wordCount, setWordCount] = React.useState(0) return ( <p> <Input setWordCount={setWordCount} /> <SomeOtherComponent count={wordCount} /> </p> ) } ReactDOM.render(<App />, document.getElementById('app'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.5/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.5/umd/react-dom.production.min.js"></script> <div id="app" />

可以看到， Input组件可以调用其parent提供的setWordCount function来改变一块state，然后parent（App）可以将这块state给任意数量的children。 每个组件也可以存在于一个单独的文件中，这仍然有效……

我不确定我是否正确理解了您的问题，但希望这可以为您提供可以在您自己的代码中重用的想法？