标签: react-props

所以我在一个组件中更新我的状态,然后将新的props传递给子,但是孩子没有正确更新,输入的defaultValue没有改变.起初我以为可能是因为我正在使用this.props开始使用this.states并首先在那里应用新的道具但似乎没有工作.

父组件

this.state.newDetails == null ? '' : 
    <NewDetailsView details={this.state.newDetails} /> 

子组件:

import React, { Component } from 'react';

class NewDetailsView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      details: (this.props.details!= null) ? this.props.details: null
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ details: nextProps });
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <input type="text" defaultValue={this.state.details.id} />
      </div>
    );
  }
}

export default NewDetailsView ;

解决方案代码

待...

我正在尝试将子组件中的数组(标题)传递给父组件,然后使用该组件设置父组件的状态.但是,在处理increaseReads()方法的更改时,我无法更改articlesRead状态

您将看到两个console.log()语句; 第一个是成功记录标题,但第二个是记录一个空数组 - 前一个状态

孩子:

export class Publication extends React.Component {
  constructor() {
    super();
    this.state = {
      titles: [],
      links: []
    };
  }

  componentDidMount() {
    fetch(this.props.api)
    .then(response => {
      return response.json();
    }).then(data => {
      let items = data.items;
      let titles = items.map(item => {
        return item.title;
      });
      let links = items.map(item => {
        return item.link;
      });
      this.setState({titles: titles, links: links});
    });
  }

  handleClick() {
    const titles = this.state.titles
    this.props.total(titles);
    //this.props.articles();
  }


  render() {
    return (
      <div className='publication'>
        <h4>{this.props.name}</h4>
        <ul> …

我正在使用 React + TypeScript。我有一个场景，我必须将一个React.SFC组件传递给另一个组件。我正在这样做：

容器.tsx

import ChildComp from './ChildComp';
<ParentComponent CustomComp={ ChildComp } someArray={ [1, 2] } />

现在的问题是，我想ChildComp用someArray值迭代这个组件， inside ParentComponent。

这个子组件有它自己的 prop someValue，我已经向它添加了类型，比如这个子组件可以接受的类型，并且我在 Parent 内部迭代它时传递了这个 prop。

父组件.tsx

const content = someArray.map((value, index) => (
  <CustomComp someValue={ value } key={ index } />
));
{ content }

但我收到错误，那 TS2339: Property 'someValue' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

虽然，如果我在Container.tsx导入它的地方直接使用上面的迭代，它工作正常。但如果我将它传递给另一个组件，则不起作用。我在这里错过了什么吗？

注意：由于相同的迭代正在处理Container.tsx，我将迭代的内容传递给ParentComponent并像变量一样呈现它：

{ …

我在 react native 中有两个组件，我无法从我的子组件中关闭一个模态。

ListTrips - 家长

ModalAddTrip - 儿童

ListTrips.js

import ModalAddTrip from './ModalAddTrip';
....
....
this.state = {
    isModalAddTripVisible: false
} 
....
handleDismissModalAddTrip = () => {
    this.setState({ isModalAddTripVisible: false });
};

closeModal() {
    this.refs.ModalAdd.handleDismissModalAddTrip();
}
....

<ModalAddTrip
    ref="ModalAdd"
    isVisible={this.state.isModalAddTripVisible}
    onBackDropPress={this.handleDismissModalAddTrip}
    closeModal={() => this.closeModal()}
    onRequestClose={this.handleDismissModalAddTrip}
/>

ModalAddTrip.js

<Modal
    isVisible={isVisible}
    onBackdropPress={onBackDropPress}
    closeModal={this.props.child}
>
<Button
    style={{ fontSize: 18, color: 'white' }}
    containerStyle={{
        padding: 8,
        marginLeft: 70,
    }}
    onPress={this.closeModal}
>

一旦我打开它，我就无法关闭它。我知道它与引用/道具有关，但我已经搞砸了几个小时，我无处可去。我正在尝试this.props.closeModal;将引用切换到子组件的方法，但它也不起作用。在 ModalAddTrip 的函数中，但这也不起作用。

任何帮助是极大的赞赏。谢谢

我在使用 TypeScript 书学习 React 进行编码时碰壁了。我投降了，直接从书上复制粘贴的代码，但是编译器还是不爽

我目前的解决方法是提供“任何”值，而不是 IProps，但这是一个廉价的黑客。

不工作的代码：

import * as React from 'react';

interface IProps {
  loading: boolean;
}

const withLoader = <P extends object>(
  Component: React.ComponentType<P>
): React.FunctionComponent<P & IProps> => ({ loading, ...props }: 
IProps) =>
  loading ? (
    <div className="loader-overlay">
      <div className="loader-circle-wrap">
        <div className="loader-circle" />
      </div>
    </div>
  ) : (
    <Component {...props} />
  );

 export default withLoader;

工作代码（我只将 IProps 更改为 any）：

import * as React from 'react';

interface IProps {
  loading: boolean;
}

const withLoader = …

React 中是否有一种方法可以基于扩展多个其他接口的 Typescript 接口来分离 props 对象？我看到的另一种方式是将重复的道具传递给不会使用它们的组件，这不是最佳解决方案。

interface IProps extends IAProps, IBProps {}

const Component1: SFC<IProps> = (props) => 
   return (
     <Component2
         {...props} <--- only IAProps
     />
     <Component3
         {...props} <--- only IBProps
     />
  );
}

我在 React 中有一个可重用的组件，我可以将一些非常简单的 props 传递给：

const Section1 = (props) => (
 <div className="section">
  <div className="container is-narrow">
    <div className="content is-medium"><h2 className="title is-1 is-bottom-bordered">{props.section1Title}</h2></div>
      <div className="columns">
        <div className="column is-half">
          <div className="content">
              <blockquote>{props.section1Blockquote}</blockquote> 
          </div>
        </div>
        <div className="column is-half">
          <div className="content">
            <p>{props.section1Text}</p>
          </div>
        </div>
      </div>
  </div>
</div> 

当我使用这个组件时，我会像这样传递道具：

<Section1
  section1Title="Example title"
  section1Blockquote="Example blockquote"
  section1Text="Example text"
/>

在我作为道具传递的字符串中，是否可以对部分文本进行样式设置，使其加粗？不是整个字符串，只是其中的一部分。在上面的例子中，section1Blockquote，我怎样才能把“例子”这个词加粗？

非常感谢。

我使用<NavLink>了routing现在如何传递props到<NavLink>另一个组件

我需要知道如何将 props 的默认值设置为 React Native。我有以下代码：

<View style={{ ...styles.textBox, ...props.bg }}>
    <Text style={{ ...styles.pretitle, ...props.style }}>{props.pretitle}</Text>
    <Text style={{ ...styles.title, ...props.style2 }}>{props.title}</Text>
    <Text style={styles.introduction}>{{ '', ...props.introduction }}</Text>
</View>

如果props.introduction是0我想将它设置为空，如：“”，或者有一些其他的价值，比如：“未设置”。

谢谢

我从 API 获取数据并将其传递给 Table 组件，如下所示：

function MainSectionOrganization() {

    const [obj, setObj] = useState([]);

    useEffect(() => {
        fetch('http://127.0.0.1:5000/getCompanies')
        .then((response) => {
            return response.json();
        }).then((data) => {
            setObj(data);
        })
    }, []);

    return (
        <Table data={obj} />
    )
}

然后，在 Table 组件中，我尝试为 props.data[0] 执行 console.log 并且我在 Chrome 终端中正确地看到了数据。

import React from 'react';
import './Table.css';
import { useTable } from 'react-table';

function Table(props) {

    console.log(props.data[0]);
    ...

但是，当我尝试访问对象的任何属性时，例如console.log(props.data[0].OU01_Code )，我遇到错误无法读取未定义的属性 '...'

我看到很多人都有类组件的解决方案，但出于某种原因我需要使用函数组件。你能帮我解决这个问题吗？