Javascript 使用Redux形式的React组件；“字段”；组成部分

我必须以redux形式实现react电话号码包。我不熟悉reactjs和redux。我必须将React代码转换为redux表单中的一个字段。这是react代码

import React from 'react';
    import ReactDOM from 'react-dom';
    import IntlTelInput from 'react-intl-tel-input';
    import '../node_modules/react-intl-tel-input/dist/main.css';
    import '../node_modules/react-intl-tel-input/dist/libphonenumber.js';


    const loadJSONP = (url, callback) => {
      const ref = window.document.getElementsByTagName('script')[0];
      const script = window.document.createElement('script');
      script.src = `${url + (url.indexOf('?') + 1 ? '&' : '?')}callback=${callback}`;
      ref.parentNode.insertBefore(script, ref);
      script.onload = () => {
        script.remove();
      };
    };

    const lookup = (callback) => {
      loadJSONP('http://ipinfo.io', 'sendBack');
      window.sendBack = (resp) => {
        const countryCode = (resp && resp.country) ? resp.country : '';
        callback(countryCode);
      }
    };

    const handler = (status, value, countryData, number, id) => {
      console.log(status, value, countryData, number, id);
    };

    ReactDOM.render(
      <IntlTelInput 
        onPhoneNumberChange={ handler }

        preferredCountries={['us','ca']}
        css={ ['intl-tel-input', 'form-control'] }
      />, 
      document.getElementById('root'),
    );

从“React”导入React；
从“react dom”导入react dom；
从“react intl tel input”导入IntlTelInput；
导入“../node_modules/react intl tel input/dist/main.css”；
导入“../node_modules/react intl tel input/dist/libphonenumber.js”；
const loadJSONP=（url，回调）=>{
const ref=window.document.getElementsByTagName（'script'）[0]；
const script=window.document.createElement（'script'）；
script.src=`${url+（url.indexOf（'？'）+1？'&'：'？'）}callback=${callback}`；
ref.parentNode.insertBefore（脚本，ref）；
script.onload=（）=>{
script.remove（）；
};
};
常量查找=（回调）=>{
loadJSONP（'http://ipinfo.io“，”发送回“）；
window.sendBack=（resp）=>{
const countryCode=（相应国家和地区）？相应国家：“”；
回调（countryCode）；
}
};
常量处理程序=（状态、值、国家数据、编号、id）=>{
日志（状态、值、国家数据、编号、id）；
};
ReactDOM.render(
, 
document.getElementById（'root'），
);

现在我想在Redux表单的“Field”组件中使用它，如下所示

const FieldCountryCode = ({
  name,
  label,
  placeholder,
  value,
  showsRequired,
}: PropsT) => (
  <Field
    name={name}
    component={IntlTelInput}
    props={{
      label,
      placeholder,
      type: 'tel',
      value,
      showsRequired,
    }}
  />
);

export default FieldCountryCode;

const FieldCountryCode=({
名称
标签，
占位符，
价值
所需的表演，
}：PropsT）=>(
);
导出默认字段CountryCode；

---

我面临的问题是，当我尝试使用字段的component属性做一些事情时，它会丢失CSS内容。下面是一个链接来描述它实际上应该如何工作

尝试删除此行

import '../node_modules/react-intl-tel-input/dist/main.css';

从上面的组件中，将其添加到根目录中主

App.js

文件的顶部

---

如果这不起作用，请尝试复制文件本身，并直接使用html

标记将其包含在

index.html

中。（只需确保您创建了该文件的副本并将其添加到您的

public

文件夹中。您将无法从node_modules目录中引用它。）

如果我对文档的理解是正确的，则

props

属性用于将道具传递给实际渲染的组件，使用

组件

道具。换句话说，do

和

字段

组件按照

的思路进行操作

解决方案是将所需的适当道具放入

字段

的

道具

道具中。给出第一个示例，应该是这样的：

<Field
  name={name}
  component={IntlTelInput}
  props={{
    preferredCountries: ["us", "ca"],
    css: ["intl-tel-input", "form-control"],
    onPhoneNumberChange: onChange,
  }}
/>

---

缺少样式可能是由于缺少

css

prop。还记得在更改此组件时定义

道具。
能否提供比“不工作”更详细的信息？应用程序是否仍然运行，只是没有样式？你是否收到任何错误消息？该应用程序可以工作，但字段左角的标志不起作用+我得到了所有列表，这些列表已经以文本形式显示在@kingdaroNo错误消息的表单上，但我认为它只是没有加载css文件@kingdaroCan你能告诉我在哪里导入css文件吗？就像我在其中一个组件中导入的一样，但我试着像@Aditya所说的那样放置它