小编viv*_*ngh的帖子

如何在反应中处理条件渲染

我正在使用react-grid-layout Thisdrag and drop and resizing在我的网站中启用。所以拖放我能够实现并将我的布局存储到本地存储也完成了。

我正在使用本地存储来保存我的布局,以便使用此示例获得更好的用户体验

事情是我想要做的是有条件地为盒子提供高度和宽度,比如如果empName==="steve"宽度应该是 5 或者它应该是 3

所以我所做的是

const generateLayout = () => {
  const p = data1 || []; //props;
  return p[0].comp_data.map(function (item, i) {
    console.log(item);
    if (item.empName === "steve") {
      return {
        x: (i * 2) % 12,
        y: Math.floor(i / 6),
        w: 2,
        h: 4,
        i: i.toString()
      };
    } else {
      return {
        x: (i * 2) % 12,
        y: Math.floor(i / 6),
        w: 4,
        h: …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-grid-layout react-hooks

12
推荐指数
1
解决办法
449
查看次数

如何使用 D3 使用 JSON 数据创建折线图

我正在使用 D3.js 和 react-hooks 来创建图表,所以我尝试Line通过四处搜索来创建一个图表并得到了一个。

  • 但是我正在使用的是示例数据,在我的情况下,我有 JSON 数据。
  • 我也使用resize-observer-polyfill这个库使图表具有响应性。
  • 现在我正在努力用 JSON 数据实现它,用动态数据呈现它。

我做了什么

const svgRef = useRef();
const wrapperRef = useRef();
const dimensions = useResizeObserver(wrapperRef); // for responsive

// will be called initially and on every data change
useEffect(() => {
    const svg = select(svgRef.current);
    const { width, height } =
        dimensions || wrapperRef.current.getBoundingClientRect();

    // scales + line generator
    const xScale = scaleLinear()
        .domain([0, data.length - 1]) // here I need to pass the data
        .range([0, …
Run Code Online (Sandbox Code Playgroud)

javascript d3.js reactjs react-hooks

6
推荐指数
1
解决办法
360
查看次数

React form hooks 如何验证选择选项

我正在使用reach hooks并验证我正在使用的表单字段,react-hook-form因为它是目前的最佳选择

所以为了验证我ref={register({ required: true })}在提交时所做的正常输入字段,它正在检查错误,因为我正在从 react-hook-form 导入错误

但是当我对选择字段做同样的事情时,它没有检查错误对象

这就是我正在做的

<label htmlFor="func" className="form_label">
      Select function
    </label>
    <select name="func" ref={register({ required: true })}>
      <option selected disabled>
        Select function
      </option>
      <option value="5">Function 2</option>
      <option value="6">Function 3</option>
    </select>
    {errors.func && (
      <div>
        <span>Function is required</span>
      </div>
    )}
Run Code Online (Sandbox Code Playgroud)

我不知道我错过了什么

我的实际代码是动态数据

所以我像这样循环它

<Form.Control as="select" custom>
                    <option disabled selected>Select role</option>
                    {loading === false &&
                    data.get_roles.map((li) => (
                    <option value={li.user_type_id}> 
                    {li.user_type}</option>
        ))}
            </Form.Control>
Run Code Online (Sandbox Code Playgroud)

反应钩子形式

javascript reactjs react-hooks react-hook-form

3
推荐指数
1
解决办法
7569
查看次数

如何从主对象创建新的对象数组

我有对象数组,并根据年龄进行过滤,并希望新的对象数组没有年龄

像这样

我有这个对象数组

    let arrayObj =[
  { name : "Joe", age:20, email: "joe@hotmail.com"},
  { name : "Mike", age:50, email: "mike@hotmail.com"},
  { name : "Joe", age:45, email: "mike@hotmail.com"}
]
Run Code Online (Sandbox Code Playgroud)

现在使用filter我正在过滤带有年龄的数组,如下所示

    let newArray = arrayObj.filter((el)=>{
  if(el.age>20){
    return el.name,el.email
  }
})
console.log(newArray)
Run Code Online (Sandbox Code Playgroud)

控制台总是显示这样的一切

[{
  age: 50,
  email: "mike@hotmail.com",
  name: "Mike"
},{
  age: 45,
  email: "mike@hotmail.com",
  name: "Joe"
}]
Run Code Online (Sandbox Code Playgroud)

但我想要

[{
      email: "mike@hotmail.com",
      name: "Mike"
    },{

      email: "mike@hotmail.com",
      name: "Joe"
    }]
Run Code Online (Sandbox Code Playgroud)

我不知道接下来要做什么才能实现这一目标

javascript

2
推荐指数
1
解决办法
96
查看次数