标签: react-component

我必须在鼠标悬停时在 react d3 v4 条形图上添加工具提示。我尝试了下面提到的自定义功能，

onMouseOverHandler(d){
   var tooltip = d3Select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

    tooltip.transition().duration(200).style("opacity", .9);      
    tooltip.html(d)  
    .style("left", d3Select(this).attr("cx") + "px")     
    .style("top", d3Select(this).attr("cy") + "px");

但它不起作用。有人能帮我解决这个问题吗？

谢谢，阿伦 S

我有这个反应组件.这不是正确呈现,但得到一个恼人的警告,如

函数作为React子函数无效.如果您返回Component而不是渲染,则可能会发生这种情况.或许你打算调用这个函数而不是返回它.

这是我的组件.我在这做错了什么？

import React, { Component } from 'react';

class Squares extends Component {   

    constructor(props){
        super(props);
        this.createSquare = this.createSquare.bind(this);
    }

    createSquare() {
        let indents = [], rows = this.props.rows, cols = this.props.cols;
        let squareSize = 50;
        for (let i = 0; i < rows; i++) {
            for (let j = 0; i < cols; j++) {
                let topPosition = j * squareSize;
                let leftPosition = i * squareSize;
                let divStyle = {
                    top: topPosition+'px', 
                    left: leftPosition+'px'
                };
                indents.push(<div style={divStyle}></div>); …

我是 React JS 的新手。我有多个图标按钮。OnClick 我只想让单击的按钮更改其颜色。我使用了状态，但是当状态改变时，所有按钮的颜色都会改变。我应该采用什么方法？有没有一种方法可以在不使用状态的情况下改变颜色？需要钥匙或身份证吗？我提供的代码已被裁剪（意味着它仅包含我认为相关的部分）。

class Utilitybar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bgColor: "default"
    };
  }
  render() {
    return (
      <div>
        <IconButton color={
          this.state.bgColor
        }
          onClick={
            () => {
              this.props.vidToggle();
              if (this.state.bgColor === "default") {
                this.setState({ bgColor: "primary" })
              } else {
                this.setState({ bgColor: "default" })
              }
            }
          }>
          <FaPlayCircle />
        </IconButton>
        <IconButton color={
          this.state.bgColor
        }
          onClick={
            () => {
              this.props.fileToggle();
              if (this.state.bgColor === "default") {
                this.setState({ bgColor: "primary" })
              } else {
                this.setState({ bgColor: "default" …

我正在尝试为样式组件创建响应式道具，如下所示。首先，我们有一个组件（假设是一个按钮）：

<Button primary large>Click Me</Button>

该按钮将获得主要背景颜色和大尺寸（由主题文件确定）。

我现在想创建此按钮的响应版本。这就是我希望的工作方式：

<Button 
  primary 
  large 
  mobile={{size: 'small', style: 'secondary'}}
  tablet={size: 'small'}} 
  widescreen={{style: 'accent'}}
>
  Click Me
</Button>

我现在有相同的按钮，但样式和尺寸因不同的屏幕尺寸而异。

现在，我已经让它工作了——但它涉及到很多重复的代码。这是它的外观示例：

const Button = styled('button')(
  ({
    mobile,
    tablet,
    tabletOnly,
    desktop,
    widescreen
  }) => css`

      ${mobile &&
      css`
        @media screen and (max-width: ${theme.breakpoints.mobile.max}) {
          background-color: ${colors[mobile.style] || mobile.style};
          border: ${colors[mobile.style] || mobile.style};
          border-radius: ${radii[mobile.radius] || mobile.radius};
          color: ${mobile.style && rc(colors[mobile.style] || mobile.style)};

        }
      `}

    ${tablet &&
      css`
        @media screen and (min-width: ${theme.breakpoints.tablet.min}), print {
          background-color: ${colors[tablet.style] || tablet.style}; …

我想将 a 转换PureComponent为 memoized FunctionalComponent，因此它仅在道具更改时重新渲染，即使父级重新渲染。

export class MyComp extends React.PureComponent<{param: string}> {
    public render() {
        return <div>{this.props.param}</div>;
    }
}

我想改变它，使它成为一个功能组件，以便使用React Hooks。

export const MyComp: React.FC<{ param: string }> = useMemo(({param}) => {
    return <div>{param}</div>;
}, [param]);

但是上面的方法不起作用，有几个问题：

1. 被破坏param的类型是any并且没有正确推断。
2. 我无法将其[param]作为依赖项列表传递，useMemo因为它未在此上下文中定义。
3. 似乎没有办法设置依赖项列表中参数的类型。这是因为参数只是来自父作用域的变量而不是传入的实际参数吗？如果是的话，如果我们不知道将传入什么道具，我们如何导出纯组件？

拥有这样的东西更有意义吗？

export const MyComp: React.FC<{ param: string }> = (param) => {
    return useMemo((param) => {
        return <div>{param}</div>;
    }, [param]);
};

该组件是否正确记忆？如果我们还有一些来自 store 的数据的内部状态，当这些数据发生变化时，它会重新呈现吗？

export const MyComp: …

我正在使用react-select和formik使用自动填充文本框构建表单。

<Formik
    initialValues={{
        assignedTo: task.assignedTo,
    }}
    onSubmit={(values) => {
        const updatedTask = { ...task, ...values };
        editTask(updatedTask);
    }}
    render={({ handleSubmit, handleChange, values }) => (
        <form>
            <Select type="text" name="assignedTo" options={options} onChange={handleChange} value={{ value: task.assignedTo, label: task.assignedTo }} />
        </form>
    })
/>

引发错误 Cannot read property 'type' of undefined

如何解决此问题并在Formik中处理react-select？

我有这个功能组件，它在将数据推送到数组时不会更新：

const Experience = (props) => {
    let experience = [{
        from:"", 
        to:"",
        employer_name:"",
        employer_number:""
    }];

    function addExperience() {
        experience = [...experience, {
            from:"", 
            to:"",
            employer_name:"",
            employer_number:"",
        }];
    }

    return (
        <>
            {experience.map((val, idx) => {
                let id = `exp-id-${idx}`

                return(
                    <div key={idx} id={id}>
                        ...
                    </div>
                )
            })}
            <button onClick={addExperience}>Add experience</button>
        </>
    )
}

单击添加体验时，映射未更新，有什么帮助吗？

我有一个子组件PatientRow，它正在从其父对象的props中接收映射的患者数组ObsTabel。奇怪的是，PatientRow从未渲染，我也无法在React Dev工具上找到PatientRow组件。另一方面，如果我只是通过患者数组，则将其映射PatienRow到组件中即可渲染，但这不是我想要的。我想将数组映射为ObsTabel＆传递给数组，PatientRow以便行是具有各自状态的单个组件。如果您能找到我的错误，请告诉我。注意：ObsTable有一个父组件，从该组件接收作为道具传递的患者数组。文件结构-ParentComponent(with patient array).js>ObsTable.js>PatientRow.js

This doesn’t exist in DOM 

export default class PatientRow extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            disabled: false
        };

    }

    render() {

        const { id, label, name, room, timestamp, observationLevel, roomStatus, patient, index } = this.props;
        console.log(this.props);

        return (
            <tbody>

                <tr key={id} >
                    <td>{label}</td>
                    <td>{name}</td>
                    <td>{observationLevel}</td>
                    <td>{roomStatus}</td>
                    <td>{timestamp} </td>

                    <td>


                        <div>
                            <Button> Awake </Button>
                            <Button>Asleep/Breathing</Button>
                        </div>

                        <Button> View Room </Button>

                        <div>
                            <Button>Awake </Button> …

我想在导入时导入一个名为“Create”的组件我想更改它的名称。但是我无法更改组件名称，因为我默认导出“创建”组件。

import Create as CreateCustomer from 'sales_app/src/screen/customer/Create' ;

我是本机反应的新手。需要帮忙。

我有一个数组，其中包含包含图标组件和标题的对象，如下所示：

 const skills = [
    { icon: <FaHtml5 className="skill-icon" />, title: "HTML5" },
    { icon: <FaCss3 className="skill-icon" />, title: "CSS3" },
    { icon: <SiJavascript className="skill-icon" />, title: "JavaScript" },
    { icon: <FaReact className="skill-icon" />, title: "ReactJS" },
    { icon: <SiBootstrap className="skill-icon" />, title: "Bootstrap" },

  ];

我必须为每个组件写入 className="skill-icon" ...我尝试了这种添加 className 的方法，但这不起作用：

skills.map((add_class) => {
    add_class.icon.add.classList("myClass");
    console.log(add_class);
  });

我们是否应该像我一样在该数组中编写 className='skill-icon' 还是有其他方法来迭代所有组件并添加 className ？

我的 HTML 看起来像这样：

      <section className="skill-card-section">
        {skills.map((skill) => {
          //iterating over all the skills from that skills array
          return …