标签: react-props

我正在尝试将道具从父组件传递到子组件，即使它被调用了两次（不知道为什么，componentDidMount应该只被调用一次），道具似乎还是空的。

父组件：

class Members extends Component{
    constructor(props){
        super(props);
        this.state = {
            interests: []
        }
    }

    componentDidMount(){
        fetch(interestUrl, {
            method: 'GET',
            headers: {
              "Content-Type": "application/json",
              "Authorization": this.props.authToken
            }
        })
        .then((response) => response.json())
        .then((json) => {this.setState({interests: json})})
        .catch(error => {console.log("Error: " + error)})
    };

    render(){
        return(
            <div className="Members-body">
                <div className="Menu-sidebar">
                    <Menu interestList = {this.state.interests}/>
                </div>
                <div className="Main-container">
                    <Main/>
                </div>
            </div>
        )
    }

}
export default Members;

子组件：

class Menu extends Component {
    constructor(props){
        super(props);
    }

    componentDidMount(){
        console.log("interestList: "  + this.props.interestList); …

在基于类的组件中,我可以轻松地编写如下代码:

import * as React from 'react';
import { render } from 'react-dom';

interface IProps<T> {
    collapsed: boolean;
    listOfData: T[];
    displayData: (data: T, index: number) => React.ReactNode;
}

class CollapsableDataList<T> extends React.Component<IProps<T>> {
    render () {
        if (!this.props.collapsed) {
            return <span>total: {this.props.listOfData.length}</span>
        } else {
            return (
                <>
                    {
                        this.props.listOfData.map(this.props.displayData)
                    }
                </>
            )
        }
    }
}

render(
    <CollapsableDataList
        collapsed={false}
        listOfData={[{a: 1, b: 2}, {a: 3, b: 4}]}
        displayData={(data, index) => (<span key={index}>{data.a + data.b}</span>)}
    />,
    document.getElementById('root'),
)

实际上这个CollapsableDataList组件应该是一个功能组件,因为它是无状态的,但是我无法弄清楚如何编写一个函数组件并在道具中使用泛型,对我有什么建议吗？

所以我有一个子组件，我想在父容器组件中渲染它的多个实例。向每个对象传递不同的道具，以便它们显示不同。

发生的情况是，它们都在渲染时将脚本中的最后一个道具实例读入两个实例中。因此，下面的两个组件都以 placeHolder==='Describe myself' 结尾，是否有解决方法，以便它们分别轮流注入它们的 props？

           <ButtonMode 
              open={this.state.open}
              handleClose={this.handleClose}
              buttonName='Update'
              modalOpen={this.modalOpen}    
              placeHolder="New picture url"
              change={this.handlePicture}
              label='URL'
            />

           <ButtonMode 
              open={this.state.open}
              handleClose={this.handleClose}
              buttonName='Update'
              modalOpen={this.modalOpen}     
              placeHolder='Describe yourself'
              label='Bio'
              change={this.handleBio}
                />

按钮模式

class ButtonMode extends Component {
    constructor(props){
        super(props)
        this.state = {
            input:''
        }
        this.handleInput = this.handleInput.bind(this);
        this.handle = this.handle.bind(this);
    }

    handleInput(val){
        this.setState({input:val})
    };

    handle() {

        this.props.change(this.state.input);
    };

    render(){
        const { classes } = this.props;
        return (
            <div>
                <Button 
                    className={classes.button}
                    onClick={this.props.modalOpen}
                    >Update
                </Button>
                <Modal
                    aria-labelledby="simple-modal-title"
                    aria-describedby="simple-modal-description"
                    open={this.props.open}
                    onClose={this.props.handleClose}
                    >
                    <div className={classes.paper}>
                        <TextField
                            id="filled-textarea"
                            label={this.props.label} …

嗨，我正在尝试设置我的反应应用程序，以便当您单击反应表中行项目中的按钮时，该行中的数据将传递到另一个组件。目前我只是想在 console.log 中记录正确的数据，但不确定如何根据点击传递反应表行数据。我怎样才能做到这一点？谢谢

我的虚拟数据与按钮（显示详细视图）一起存储在状态中，我想触发通过 onclick 的数据：

    columns: [
      {
        Header: "First Name",
        accessor: "fname"
      },
      {
        Header: "Last Name",
        accessor: "lname"
      },
      {
        Header: "Employee Group",
        accessor: "egroup"
      },
      {
        Header: "Date of Birth",
        accessor: "dob"
      },
      {
        Header: "",
        id: "id",
        Cell: ({ row }) => (
          <button onClick={e => this.handleShow()}>
            Detailed View
          </button>
        )
      },
    ],
    posts: [
      {
        fname: "gerald",
        lname: "nakhle",
        egroup: "faisbuk",
        dob: "8/10/1995"
      }
    ]

我调用渲染表：

<ReactTable columns={this.state.columns} data={this.state.posts}></ReactTable>

我的 onclick 处理函数，但我不确定如何访问我所追求的表格行数据

handleShow(e) { …

我有一个用于显示一些数据的表格组件。分派动作后，状态中的表数据正在发生变化。但是我的表格组件没有更新。它仅在我单击表格另一行中的另一个单选按钮时更新。我希望我的组件在数据更改时重新渲染。这是我的代码：

const mapStateToProps = state => ({
  evaluationData: evaluationResultsSelector(state)
});

const mapDispatchToProps = dispatch => ({
  setSelectedEvaluationRecord: record =>
    dispatch(setSelectedEvaluationRecord(record))
});


export default connect(mapStateToProps,
  mapDispatchToProps
  EvaluationDataTable,  
);

我的组件是这样的：

import React from 'react';
import Table from 'antd/lib/table';
import 'antd/lib/table/style/css';
import "antd/dist/antd.css";
import { columnEvaluation } from './evaluationDataStructure';

class EvaluationDataTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [0], // Check here to configure the default column
    };
  }
  // shouldComponentUpdate(prevProps, prevState) {
  //   return (prevProps.results !== this.props.results || prevState.selectedRowKeys …

我通过做在API调用axios中React使用UseEffect。
我们将响应设置为一个名为datausing的变量useState

const [data, setData] = useState({});
  setData(response);

响应来自 NASA API，我们只得到一个为此调用返回的对象（粘贴在下面）。

由于我将响应命名为“data”并且它也有一个“data”键，如果我想记录 url，我知道我会输入console.log(data.data.url)并且在我的app.js主函数中可以顺利运行。在我的card.js组件中，我可以成功登录console.log(data)，console.log(data.data)并且它完全符合您的预期，但是当我console.log(data.data.url)或(data.data.title)它由于某种原因变成时undefined，这会导致 JSX 的返回函数出现大错误，并且站点将无法加载：

 TypeError: Cannot read property 'data' of undefined error.

我不认为我的命名有任何问题，因为它在对象的更高级别工作正常，例如console.log(data.data)工作，并且我在眼前看到列出的下一级属性。

我真的是在 console.logging 这个：

{console.log('FROM INSIDE THE RETURN')}
{console.log(props.data)}  // works, displays object {}
{console.log(props.data.data)}  //works, displays object one level lower   
{console.log(props.data.data.url)}  // type error. You name the property.

不用说这行不通，这是我完成任务的第一种方法： …

我正在尝试学习打字稿，说实话，我对此感到非常困惑。我知道这个问题之前已经被问过无数次了，但我一生都无法弄清楚如何将我正在阅读的答案翻译成我自己的代码。没有帮助的是，我似乎发现很多答案都使用与我一直使用的语法不同的语法来编写组件。无论如何，非常感谢任何帮助，因为我在这里完全迷失了。我实际上只有两个文件，App.tsx 和 DisplayPerson.tsx

在我的 App.tsx 文件中，我有以下代码：

import React from 'react';
import DisplayPerson from './components/DisplayPerson';

export interface Person {
    firstName: string;
    lastName: string;
}

function App() {
    const person1: Person = {
        firstName: 'fname',
        lastName: 'lname',
    };

    return (
        <div>
            <DisplayPerson person={person1} />
        </div>
    );
}

export default App;

在我的 DisplayPerson.tsx 文件中，我有：

import React from 'react';
import { Person } from '../App';

export default function DisplayPerson({ person }: Person) {
    return (
        <div>
            <h1>person.firstName</h1>
            <h1>person.lastName</h1>
        </div>
    );
}

在 DisplayPerson.tsx 中，出现错误，提示“类型‘Person’上不存在属性‘person’”。我试图通过将我的 …

我想创建一个通用的 Table 组件。

type HeadCell<DataType> = {
  id: keyof DataType;
  label: string;
};

type TableProps<DataType> = {
  heads: HeadCell<DataType>[];
  rows: Array<DataType>;
};

const Table = ({ heads, rows }: TableProps) => {
  const ColumnsKeys = heads.map(
    (item: { [key: string]: any }) => item.id
  );

  return (
    <table>
      <tr>
        {heads.map((head: string, headKey: number) => {
          return (
            <th key={headKey}>{head.label}</th>
          );
        })}
      </tr>

      {rows.map((row, rowKey) => {
        return (
          <tr key={rowKey}>
            {ColumnsKeys.map((column: string, columnKey: number) => {
              return (
                <td key={columnKey}>{row[column]}</td> …

我正在寻找最“规范”和/或“最新”的方法来将一组默认 HTML 属性作为一组允许的 TypeScript 属性添加到自定义的“增强”HTML 组件中，比如说一个Button.

我发现了两个类型定义。第一个是React.HTMLProps<T>，第二个JSX.IntrinsicElements["T"]。

所以我可以Button通过这种方式增强我的能力：

type Props = {
  children: React.ReactNode
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
  type?: "button" | "submit" | "reset"
  className?: string
} & React.HTMLProps<HTMLButtonElement> 

或者像这样：

type Props = {
  children: React.ReactNode
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
  type?: "button" | "submit" | "reset"
  className?: string
} & JSX.IntrinsicElements["button"]

我已经尝试了两种方法，它们似乎都工作得很好（没有弯曲的红线）。

问题是：这些类型定义之间是否存在显着差异？我应该使用React.HTMLProps<T>, JSX.IntrinsicElements["T"]，还是这只是个人喜好问题？

谢谢。

稍微相关的问题

有人请用一个简单的例子向我解释 React 文档的最后一段，它是关于 React.PureComponent 的，我见过的所有示例都是高级的，我刚刚开始了解这个概念，但我无法确切地看到它是什么指。正是这一点，孩子也应该“纯洁”。据我所知，我认为这种说法有些言过其实，因为如果父亲不重新呈现自己，那么孩子们也不会重新呈现自己。，或者，是否有什么东西我无法逃脱而我无法想象？这就是为什么我需要一个简单的例子，我已经在这里查看了所有类似的问题，但它们是高级示例，并不涵盖我正在寻找的内容。

“此外，React.PureComponent 的 shouldComponentUpdate() 会跳过整个组件子树的 prop 更新。确保所有子组件也是“纯”的”