Cách truyền đạo cụ cho {this.props.children}

Tôi đang cố gắng tìm cách thích hợp để xác định một số thành phần có thể được sử dụng theo cách chung:

<Parent>
  <Child value="1">
  <Child value="2">
</Parent>

Tất nhiên, có một logic đang diễn ra giữa các thành phần cha mẹ và con cái, bạn có thể tưởng tượng <select>và <option>như một ví dụ về logic này.

Đây là một triển khai giả cho mục đích của câu hỏi:

var Parent = React.createClass({
  doSomething: function(value) {
  },
  render: function() {
    return (<div>{this.props.children}</div>);
  }
});

var Child = React.createClass({
  onClick: function() {
    this.props.doSomething(this.props.value); // doSomething is undefined
  },
  render: function() {
    return (<div onClick={this.onClick}></div>);
  }
});

Câu hỏi là bất cứ khi nào bạn sử dụng {this.props.children}để xác định một thành phần bao bọc, làm thế nào để bạn truyền lại một số tài sản cho tất cả các con của nó?

Nhân bản trẻ em với đạo cụ mới

Bạn có thể sử dụng React.Children để lặp lại cho trẻ em và sau đó sao chép từng phần tử với các đạo cụ mới (được hợp nhất nông) bằng React.cloneEuity, ví dụ:

import React, { Children, isValidElement, cloneElement } from 'react';

const Child = ({ doSomething, value }) => (
  <div onClick={() => doSomething(value)}>Click Me</div>
);

function Parent({ children }) {
  function doSomething(value) {
    console.log('doSomething called by child with value:', value);
  }

  render() {
    const childrenWithProps = Children.map(children, child => {
      // Checking isValidElement is the safe way and avoids a TS error too.
      if (isValidElement(child)) {
        return cloneElement(child, { doSomething })
      }

      return child;
    });

    return <div>{childrenWithProps}</div>
  }
};

ReactDOM.render(
  <Parent>
    <Child value="1" />
    <Child value="2" />
  </Parent>,
  document.getElementById('container')
);

Câu đố: https://jsfiddle.net/2q294y43/2/

Gọi trẻ em là một chức năng

Bạn cũng có thể truyền đạo cụ cho trẻ em với đạo cụ render . Theo cách tiếp cận này, trẻ em (có thể childrenhoặc bất kỳ tên prop nào khác) là một chức năng có thể chấp nhận bất kỳ đối số nào bạn muốn vượt qua và trả về trẻ em:

const Child = ({ doSomething, value }) => (
  <div onClick={() =>  doSomething(value)}>Click Me</div>
);

function Parent({ children }) {
  function doSomething(value) {
    console.log('doSomething called by child with value:', value);
  }

  render() {
    // Note that children is called as a function and we can pass args to it
    return <div>{children(doSomething)}</div>
  }
};

ReactDOM.render(
  <Parent>
    {doSomething => (
      <React.Fragment>
        <Child doSomething={doSomething} value="1" />
        <Child doSomething={doSomething} value="2" />
      </React.Fragment>
    )}
  </Parent>,
  document.getElementById('container')
);

Thay vì <React.Fragment>hoặc đơn giản, <>bạn cũng có thể trả về một mảng nếu bạn thích.

Câu đố: https://jsfiddle.net/ferahl/y5pcua68/7/

Để biết cách làm sạch hơn một chút, hãy thử:

<div>
    {React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}
</div>

Chỉnh sửa: Để sử dụng với nhiều trẻ em riêng lẻ (trẻ phải là một thành phần) bạn có thể làm. Đã thử nghiệm vào 16.8.6

<div>
    {React.cloneElement(props.children[0], { loggedIn: true, testingTwo: true })}
    {React.cloneElement(props.children[1], { loggedIn: true, testProp: false })}
</div>

Thử cái này

<div>{React.cloneElement(this.props.children, {...this.props})}</div>

Nó hoạt động với tôi bằng cách sử dụng Reac-15.1.

Truyền đạo cụ cho con trực tiếp.

Xem tất cả các câu trả lời khác

Truyền dữ liệu toàn cầu được chia sẻ thông qua cây thành phần thông qua ngữ cảnh

Bối cảnh được thiết kế để chia sẻ dữ liệu có thể được coi là thế giới toàn cầu cho một nhóm các thành phần React, chẳng hạn như người dùng, chủ đề hoặc ngôn ngữ ưa thích hiện tại. ¹

Tuyên bố miễn trừ trách nhiệm: Đây là câu trả lời được cập nhật, câu trả lời trước đã sử dụng API ngữ cảnh cũ

Nó dựa trên nguyên tắc Tiêu dùng / Cung cấp. Đầu tiên, tạo bối cảnh của bạn

const { Provider, Consumer } = React.createContext(defaultValue);

Sau đó sử dụng qua

<Provider value={/* some value */}>
  {children} /* potential consumers */
<Provider />

và

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

Tất cả Người tiêu dùng là hậu duệ của Nhà cung cấp sẽ kết xuất lại bất cứ khi nào thay đổi giá trị của Nhà cung cấp thay đổi. Việc truyền bá từ Nhà cung cấp đến Người tiêu dùng hậu duệ của nó không phải tuân theo phương thức ShouldComponentUpdate, do đó, Người tiêu dùng được cập nhật ngay cả khi thành phần tổ tiên thoát khỏi bản cập nhật. ¹

Ví dụ đầy đủ, mã bán giả.

import React from 'react';

const { Provider, Consumer } = React.createContext({ color: 'white' });

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: { color: 'black' },
    };
  }

  render() {
    return (
      <Provider value={this.state.value}>
        <Toolbar />
      </Provider>
    );
  }
}

class Toolbar extends React.Component {
  render() {
    return ( 
      <div>
        <p> Consumer can be arbitrary levels deep </p>
        <Consumer> 
          {value => <p> The toolbar will be in color {value.color} </p>}
        </Consumer>
      </div>
    );
  }
}

¹ https://facebook.github.io/react/docs/context.html

Truyền đạo cụ cho trẻ em làm tổ

Với bản cập nhật cho React 16.6, giờ đây bạn có thể sử dụng React.createContext và bối cảnh .

import * as React from 'react';

// React.createContext accepts a defaultValue as the first param
const MyContext = React.createContext(); 

class Parent extends React.Component {
  doSomething = (value) => {
    // Do something here with value
  };

  render() {
    return (
       <MyContext.Provider value={{ doSomething: this.doSomething }}>
         {this.props.children}
       </MyContext.Provider>
    );
  }
}

class Child extends React.Component {
  static contextType = MyContext;

  onClick = () => {
    this.context.doSomething(this.props.value);
  };      

  render() {
    return (
      <div onClick={this.onClick}>{this.props.value}</div>
    );
  }
}


// Example of using Parent and Child

import * as React from 'react';

class SomeComponent extends React.Component {

  render() {
    return (
      <Parent>
        <Child value={1} />
        <Child value={2} />
      </Parent>
    );
  }
}

React.createContext tỏa sáng trong trường hợp React.cloneEuity không thể xử lý các thành phần lồng nhau

class SomeComponent extends React.Component {

  render() {
    return (
      <Parent>
        <Child value={1} />
        <SomeOtherComp><Child value={2} /></SomeOtherComp>
      </Parent>
    );
  }
}

Bạn có thể sử dụng React.cloneElement, tốt hơn là nên biết nó hoạt động như thế nào trước khi bạn bắt đầu sử dụng nó trong ứng dụng của mình. Nó được giới thiệu React v0.13, đọc để biết thêm thông tin, vì vậy một cái gì đó cùng với công việc này cho bạn:

<div>{React.cloneElement(this.props.children, {...this.props})}</div>

Vì vậy, hãy mang các dòng từ tài liệu React để bạn hiểu cách tất cả hoạt động và cách bạn có thể sử dụng chúng:

Trong React v0.13 RC2, chúng tôi sẽ giới thiệu một API mới, tương tự như React.addons.cloneWithProps, với chữ ký này:

React.cloneElement(element, props, ...children);

Không giống như cloneWithProps, chức năng mới này không có bất kỳ hành vi tích hợp ma thuật nào để hợp nhất kiểu và className vì lý do tương tự chúng ta không có tính năng đó từ transferPropsTo. Không ai chắc chắn chính xác danh sách đầy đủ các thứ ma thuật là gì, điều này gây khó khăn cho việc suy luận về mã và khó sử dụng lại khi phong cách có một chữ ký khác (ví dụ như trong React Native sắp tới).

React.cloneEuity gần như tương đương với:

<element.type {...element.props} {...props}>{children}</element.type>

Tuy nhiên, không giống như JSX và cloneWithProps, nó cũng bảo toàn refs. Điều này có nghĩa là nếu bạn có một đứa trẻ với một giới thiệu về nó, bạn sẽ không vô tình đánh cắp nó từ tổ tiên của bạn. Bạn sẽ nhận được cùng một tham chiếu đến yếu tố mới của bạn.

Một mô hình phổ biến là lập bản đồ cho con cái của bạn và thêm một chỗ dựa mới. Có nhiều vấn đề được báo cáo về cloneWithProps mất ref, khiến cho việc lập luận về mã của bạn trở nên khó khăn hơn. Bây giờ theo cùng một mẫu với cloneEuity sẽ hoạt động như mong đợi. Ví dụ:

var newChildren = React.Children.map(this.props.children, function(child) {
  return React.cloneElement(child, { foo: true })
});

Lưu ý: React.cloneE bổ sung (con, {ref: 'newRef'}) KHÔNG ghi đè lên ref nên hai cha mẹ vẫn không thể có một ref cho cùng một đứa trẻ, trừ khi bạn sử dụng ref-refs.

Đây là một tính năng quan trọng để vào React 0.13 vì các đạo cụ giờ đây không thay đổi. Đường dẫn nâng cấp thường là sao chép phần tử, nhưng bằng cách đó bạn có thể mất ref. Do đó, chúng tôi cần một đường dẫn nâng cấp đẹp hơn ở đây. Khi chúng tôi nâng cấp các cuộc gọi tại Facebook, chúng tôi nhận ra rằng chúng tôi cần phương pháp này. Chúng tôi đã nhận được phản hồi tương tự từ cộng đồng. Do đó, chúng tôi đã quyết định tạo một RC khác trước khi phát hành cuối cùng để đảm bảo chúng tôi có được điều này.

Chúng tôi dự định cuối cùng sẽ phản đối React.addons.cloneWithProps. Chúng tôi chưa làm điều đó, nhưng đây là một cơ hội tốt để bắt đầu suy nghĩ về việc sử dụng của riêng bạn và xem xét sử dụng React.cloneEuity thay thế. Chúng tôi chắc chắn sẽ gửi một bản phát hành với các thông báo phản đối trước khi chúng tôi thực sự xóa nó để không cần phải hành động ngay lập tức.

thêm ở đây ...

Cách tốt nhất, cho phép bạn thực hiện chuyển nhượng tài sản là children giống như một chức năng

Thí dụ:

export const GrantParent = () => {
  return (
    <Parent>
      {props => (
        <ChildComponent {...props}>
          Bla-bla-bla
        </ChildComponent>
      )}
    </Parent>
  )
}

export const Parent = ({ children }) => {
    const somePropsHere = { //...any }
    <>
        {children(somePropsHere)}
    </>
}

Tôi cần thiết để sửa chữa câu trả lời được chấp nhận ở trên để làm cho nó hoạt sử dụng mà thay vì này con trỏ. Điều này trong phạm vi chức năng bản đồ không có chức năng doS Something được xác định.

var Parent = React.createClass({
doSomething: function() {
    console.log('doSomething!');
},

render: function() {
    var that = this;
    var childrenWithProps = React.Children.map(this.props.children, function(child) {
        return React.cloneElement(child, { doSomething: that.doSomething });
    });

    return <div>{childrenWithProps}</div>
}})

Cập nhật: bản sửa lỗi này dành cho ECMAScript 5, trong ES6 không cần trong var that = this

Cách sạch hơn khi xem xét một hoặc nhiều trẻ em

<div>
   { React.Children.map(this.props.children, child => React.cloneElement(child, {...this.props}))}
</div>

Không có câu trả lời nào đề cập đến vấn đề sinh con KHÔNG phải là thành phần Phản ứng, chẳng hạn như chuỗi văn bản. Một cách giải quyết có thể là một cái gì đó như thế này:

// Render method of Parent component
render(){
    let props = {
        setAlert : () => {alert("It works")}
    };
    let childrenWithProps = React.Children.map( this.props.children, function(child) {
        if (React.isValidElement(child)){
            return React.cloneElement(child, props);
        }
          return child;
      });
    return <div>{childrenWithProps}</div>

}

Bạn không còn cần {this.props.children}. Bây giờ bạn có thể quấn thành phần con bạn sử dụng rendertrong Routevà thông qua đạo cụ của bạn như bình thường:

<BrowserRouter>
  <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/posts">Posts</Link></li>
      <li><Link to="/about">About</Link></li>
    </ul>

    <hr/>

    <Route path="/" exact component={Home} />
    <Route path="/posts" render={() => (
      <Posts
        value1={1}
        value2={2}
        data={this.state.data}
      />
    )} />
    <Route path="/about" component={About} />
  </div>
</BrowserRouter>

Parent.jsx:

import React from 'react';

const doSomething = value => {};

const Parent = props => (
  <div>
    {
      !props || !props.children 
        ? <div>Loading... (required at least one child)</div>
        : !props.children.length 
            ? <props.children.type {...props.children.props} doSomething={doSomething} {...props}>{props.children}</props.children.type>
            : props.children.map((child, key) => 
              React.cloneElement(child, {...props, key, doSomething}))
    }
  </div>
);

Con.jsx:

import React from 'react';

/* but better import doSomething right here,
   or use some flux store (for example redux library) */
export default ({ doSomething, value }) => (
  <div onClick={() => doSomething(value)}/>
);

và main.jsx:

import React from 'react';
import { render } from 'react-dom';
import Parent from './Parent';
import Child from './Child';

render(
  <Parent>
    <Child/>
    <Child value='1'/>
    <Child value='2'/>
  </Parent>,
  document.getElementById('...')
);

xem ví dụ tại đây: https://plnkr.co/edit/jJHQECrKRrtKlKYRpIWl?p=preview

Có lẽ bạn cũng có thể thấy tính năng này hữu ích, mặc dù nhiều người đã coi đây là một mô hình chống lại nó vẫn có thể được sử dụng nếu bạn biết bạn đang làm gì và thiết kế giải pháp của bạn tốt.

Chức năng như các thành phần con

Nếu bạn có nhiều con bạn muốn truyền đạo cụ cho, bạn có thể thực hiện theo cách này, sử dụng React.Children.map:

render() {
    let updatedChildren = React.Children.map(this.props.children,
        (child) => {
            return React.cloneElement(child, { newProp: newProp });
        });

    return (
        <div>
            { updatedChildren }
        </div>
    );
}

Nếu thành phần của bạn chỉ có một con, không cần lập bản đồ, bạn có thể ngay lập tức cloneEuity:

render() {
    return (
        <div>
            {
                React.cloneElement(this.props.children, {
                    newProp: newProp
                })
            }
        </div>
    );
}

Theo tài liệu của cloneElement()

React.cloneElement(
  element,
  [props],
  [...children]
)

Nhân bản và trả về một phần tử React mới bằng cách sử dụng phần tử làm điểm bắt đầu. Phần tử kết quả sẽ có các đạo cụ của phần tử gốc với các đạo cụ mới được kết hợp một cách nông cạn. Trẻ em mới sẽ thay thế trẻ em hiện có. khóa và ref từ phần tử gốc sẽ được giữ nguyên.

React.cloneElement() gần như tương đương với:

<element.type {...element.props} {...props}>{children}</element.type>

Tuy nhiên, nó cũng bảo tồn refs. Điều này có nghĩa là nếu bạn có một đứa trẻ với một giới thiệu về nó, bạn sẽ không vô tình đánh cắp nó từ tổ tiên của bạn. Bạn sẽ nhận được cùng một tham chiếu đến yếu tố mới của bạn.

Vì vậy, cloneEuity là những gì bạn sẽ sử dụng để cung cấp đạo cụ tùy chỉnh cho trẻ em. Tuy nhiên, có thể có nhiều con trong thành phần và bạn sẽ cần phải lặp lại nó. Những câu trả lời khác gợi ý cho bạn là ánh xạ qua chúng bằng cách sử dụng React.Children.map. Tuy nhiên, React.Children.mapkhông giống như React.cloneElementthay đổi các khóa của phần tử nối thêm và thêm .$vào làm tiền tố. Kiểm tra câu hỏi này để biết thêm chi tiết: React.cloneEuity bên trong React.Children.map đang khiến các khóa phần tử thay đổi

Nếu bạn muốn tránh nó, thay vào đó bạn nên tìm forEachchức năng như

render() {
    const newElements = [];
    React.Children.forEach(this.props.children, 
              child => newElements.push(
                 React.cloneElement(
                   child, 
                   {...this.props, ...customProps}
                )
              )
    )
    return (
        <div>{newElements}</div>
    )

}

Hơn nữa với câu trả lời @and_rest, đây là cách tôi nhân bản trẻ em và thêm một lớp học.

<div className="parent">
    {React.Children.map(this.props.children, child => React.cloneElement(child, {className:'child'}))}
</div>

Tôi nghĩ rằng một prop prop là cách thích hợp để xử lý tình huống này

Bạn để cho Phụ huynh cung cấp các đạo cụ cần thiết được sử dụng trong thành phần con, bằng cách cấu trúc lại mã Cha mẹ để tìm kiếm một cái gì đó như thế này:

const Parent = ({children}) => {
  const doSomething(value) => {}

  return children({ doSomething })
}

Sau đó, trong Thành phần con, bạn có thể truy cập hàm được cung cấp bởi cha mẹ theo cách này:

class Child extends React {

  onClick() => { this.props.doSomething }

  render() { 
    return (<div onClick={this.onClick}></div>);
  }

}

Bây giờ cấu trúc fianl sẽ trông như thế này:

<Parent>
  {(doSomething) =>
   (<Fragment>
     <Child value="1" doSomething={doSomething}>
     <Child value="2" doSomething={doSomething}>
    <Fragment />
   )}
</Parent>

Phương pháp 1 - trẻ em nhân bản

const Parent = (props) => {
   const attributeToAddOrReplace= "Some Value"
   const childrenWithAdjustedProps = React.Children.map(props.children, child =>
      React.cloneElement(child, { attributeToAddOrReplace})
   );

   return <div>{childrenWithAdjustedProps }</div>
}

Phương pháp 2 - sử dụng bối cảnh tổng hợp

Bối cảnh cho phép bạn chuyển một chỗ dựa cho một thành phần con sâu mà không rõ ràng chuyển nó như một chỗ dựa thông qua các thành phần ở giữa.

Bối cảnh đi kèm với nhược điểm:

1. Dữ liệu không chảy theo cách thông thường - thông qua các đạo cụ.
2. Sử dụng bối cảnh tạo ra một hợp đồng giữa người tiêu dùng và nhà cung cấp. Có thể khó hiểu hơn và sao chép các yêu cầu cần thiết để sử dụng lại một thành phần.

Sử dụng bối cảnh tổng hợp

export const Context = createContext<any>(null);

export const ComposableContext = ({ children, ...otherProps }:{children:ReactNode, [x:string]:any}) => {
    const context = useContext(Context)
    return(
      <Context.Provider {...context} value={{...context, ...otherProps}}>{children}</Context.Provider>
    );
}

function App() {
  return (
      <Provider1>
            <Provider2> 
                <Displayer />
            </Provider2>
      </Provider1>
  );
}

const Provider1 =({children}:{children:ReactNode}) => (
    <ComposableContext greeting="Hello">{children}</ComposableContext>
)

const Provider2 =({children}:{children:ReactNode}) => (
    <ComposableContext name="world">{children}</ComposableContext>
)

const Displayer = () => {
  const context = useContext(Context);
  return <div>{context.greeting}, {context.name}</div>;
};

Cách dễ nhất để làm điều này:

    {React.cloneElement(this.props.children, this.props)}

Đối với bất kỳ ai có một yếu tố con duy nhất, điều này nên làm điều đó.

{React.isValidElement(this.props.children)
                  ? React.cloneElement(this.props.children, {
                      ...prop_you_want_to_pass
                    })
                  : null}

Đây có phải là những gì bạn yêu cầu?

var Parent = React.createClass({
  doSomething: function(value) {
  }
  render: function() {
    return  <div>
              <Child doSome={this.doSomething} />
            </div>
  }
})

var Child = React.createClass({
  onClick:function() {
    this.props.doSome(value); // doSomething is undefined
  },  
  render: function() {
    return  <div onClick={this.onClick}></div>
  }
})

Một số lý do React.children không làm việc cho tôi. Đây là những gì làm việc cho tôi.

Tôi muốn chỉ thêm một lớp học cho đứa trẻ. tương tự như thay đổi một chỗ dựa

 var newChildren = this.props.children.map((child) => {
 const className = "MenuTooltip-item " + child.props.className;
    return React.cloneElement(child, { className });
 });

 return <div>{newChildren}</div>;

Thủ thuật ở đây là React.cloneEuity . Bạn có thể vượt qua bất kỳ chỗ dựa nào theo cách tương tự

Render đạo cụ là cách tiếp cận chính xác nhất cho vấn đề này. Thay vì chuyển thành phần con cho thành phần cha làm đạo cụ con, hãy để cha mẹ kết xuất thành phần con theo cách thủ công. Render là các đạo cụ tích hợp trong phản ứng, có tham số chức năng. Trong chức năng này, bạn có thể cho phép thành phần cha mẹ kết xuất bất cứ thứ gì bạn muốn với các tham số tùy chỉnh. Về cơ bản nó làm điều tương tự như đạo cụ trẻ em nhưng nó có thể tùy chỉnh nhiều hơn.

class Child extends React.Component {
  render() {
    return <div className="Child">
      Child
      <p onClick={this.props.doSomething}>Click me</p>
           {this.props.a}
    </div>;
  }
}

class Parent extends React.Component {
  doSomething(){
   alert("Parent talks"); 
  }

  render() {
    return <div className="Parent">
      Parent
      {this.props.render({
        anythingToPassChildren:1, 
        doSomething: this.doSomething})}
    </div>;
  }
}

class Application extends React.Component {
  render() {
    return <div>
      <Parent render={
          props => <Child {...props} />
        }/>
    </div>;
  }
}

Ví dụ tại codepen

Khi sử dụng các thành phần chức năng, bạn sẽ thường gặp TypeError: Cannot add property myNewProp, object is not extensiblelỗi khi cố gắng đặt thuộc tính mới props.children. Có một công việc xoay quanh vấn đề này bằng cách nhân bản các đạo cụ và sau đó nhân bản chính đứa trẻ bằng các đạo cụ mới.

const MyParentComponent = (props) => {
  return (
    <div className='whatever'>
      {props.children.map((child) => {
        const newProps = { ...child.props }
        // set new props here on newProps
        newProps.myNewProp = 'something'
        const preparedChild = { ...child, props: newProps }
        return preparedChild
      })}
    </div>
  )
}